locked
how to update the song title and thumbnail image which SystemMediaTransportControls displays in javascript

    Question

  • Hi All,

    I am using a video element in my app to play vidoes and I set msaudiocategory="BackgroundCapableMedia" to play video in  background. When it plays in the background, I need to show the info of the video such as its name and thumbnail image. For that I am using SystemMediaTransportControls and it shows the volumne,play ,pause buttons. now I want to show the thumbnail image and title of the video there .right now it displays the app name and app logo. how to replace these two with the videos info?

    I found a code snippet at http://msdn.microsoft.com/en-us/library/windows/apps/dn263187.aspx and it is in C#.

    I modified the code like this

    function UpdateSongInfoManually() {
            var systemMediaControl = Windows.Media.SystemMediaTransportControls;
            // Get the updater.
            var updater = systemMediaControls.displayUpdater;
            try {
                if (updater != undefined) {
                    // Music metadata.
                    updater.musicProperties.AlbumArtist = "artist";
                    updater.musicProperties.AlbumArtist = "album artist";
                    updater.musicProperties.Title = "song title";
    
                    // Set the album art thumbnail.
                    // RandomAccessStreamReference is defined in Windows.Storage.Streams
                    //updater.Thumbnail =
                    //   RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Music/music1_AlbumArt.jpg"));
    
                    // Update the system media transport controls.
                    updater.update();
                }
            }
            catch (e) { }
        }
    where
    systemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView();

    but at line updater.musicProperties, it says "WinRTError: The request is not supported.

    The media type has not been initialized.  Please provide a valid media type first in order to access these properties.".

    where should I call this method? in the sample, mediaopened event is used but the same is not available for video element. please guide me and let me know where I am doing wrong...

    Thanks in advance.


    Nazia



    Wednesday, November 27, 2013 6:06 AM

Answers

  • Thanks James for your response.

    I missed to set the type for the displayUpdater.

    Here is the complete code

    function UpdateSongInfoManually() {
            var systemMediaControl = Windows.Media.SystemMediaTransportControls;
            // Get the updater.
            var updater = systemMediaControls.displayUpdater;
       if (isvideo)
         updater.type = Windows.Media.MediaPlaybackType.video;
       else
         updater.type = Windows.Media.MediaPlaybackType.music;
    
            try {
                if (updater != undefined) {
                    // Music metadata.
                    updater.musicProperties.AlbumArtist = "artist";
                    updater.musicProperties.AlbumArtist = "album artist";
                    updater.musicProperties.Title = "song title";
    
                    // Set the album art thumbnail.
                    // RandomAccessStreamReference is defined in Windows.Storage.Streams
                    //updater.Thumbnail =
                    //   RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Music/music1_AlbumArt.jpg"));
    
                    // Update the system media transport controls.
                    updater.update();
                }
            }
            catch (e) { }
        }


    Nazia

    • Marked as answer by Nazia Firdouse Thursday, November 28, 2013 10:01 AM
    Thursday, November 28, 2013 10:01 AM
  • Hi Nazia,

    Take a look at the sample, should help you: http://code.msdn.microsoft.com/windowsapps/Media-Hub-sample-app-3ea52c49

    From your error message I doubt if the SystemMediaTransportControls cannot recognize your media type, try with another media to see if still have such error. Your code seems correct, I can't find any mistake from it.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Nazia Firdouse Thursday, November 28, 2013 10:01 AM
    Thursday, November 28, 2013 9:17 AM
    Moderator

All replies

  • Hi Nazia,

    Take a look at the sample, should help you: http://code.msdn.microsoft.com/windowsapps/Media-Hub-sample-app-3ea52c49

    From your error message I doubt if the SystemMediaTransportControls cannot recognize your media type, try with another media to see if still have such error. Your code seems correct, I can't find any mistake from it.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Nazia Firdouse Thursday, November 28, 2013 10:01 AM
    Thursday, November 28, 2013 9:17 AM
    Moderator
  • Thanks James for your response.

    I missed to set the type for the displayUpdater.

    Here is the complete code

    function UpdateSongInfoManually() {
            var systemMediaControl = Windows.Media.SystemMediaTransportControls;
            // Get the updater.
            var updater = systemMediaControls.displayUpdater;
       if (isvideo)
         updater.type = Windows.Media.MediaPlaybackType.video;
       else
         updater.type = Windows.Media.MediaPlaybackType.music;
    
            try {
                if (updater != undefined) {
                    // Music metadata.
                    updater.musicProperties.AlbumArtist = "artist";
                    updater.musicProperties.AlbumArtist = "album artist";
                    updater.musicProperties.Title = "song title";
    
                    // Set the album art thumbnail.
                    // RandomAccessStreamReference is defined in Windows.Storage.Streams
                    //updater.Thumbnail =
                    //   RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Music/music1_AlbumArt.jpg"));
    
                    // Update the system media transport controls.
                    updater.update();
                }
            }
            catch (e) { }
        }


    Nazia

    • Marked as answer by Nazia Firdouse Thursday, November 28, 2013 10:01 AM
    Thursday, November 28, 2013 10:01 AM
  • For others stuck on using the WinJS' displayUpdater, it may be beneficial to edit your solution with the current property (lower-case) names as shown in the sample below:

    updater.musicProperties.artist = "artist";
    updater.musicProperties.albumArtist = "album artist";
    updater.musicProperties.title = "song title";
    // Example using web-hosted image
    updater.thumbnail = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri('http://smodcast.com/wp-content/blogs.dir/1/files_mf/smodcast1400.jpg'));
    updater.update();
    Monday, March 17, 2014 2:03 AM