alexa - audioPlayer.Play issue displaying content on Echo Show Now Playing screen

Question

I am having issues understanding how to display images on the Echo Show inside the audioPlayer 'Now Playing' screen.

I am currently playing an audio file and want to display an image on the 'Now Playing' screen. The closest I have been able to get is the following code which displays the image and title just before the audio starts, but then disappears immediately and the Echo Show goes to the 'Now Playing' screen with no background image and no metadata. I feel I'm close, but just cannot understand how to update the 'Now Playing' screen, rather than the screen that comes immediately before it.

This is part of the code (which works as per above):

var handlers = {
  'LaunchRequest': function() {
   this.emit('PlayStream');        
   },

'PlayStream': function() {
 let builder = new Alexa.templateBuilders.BodyTemplate1Builder();
 let template = builder.setTitle('Test Title')
    .setBackgroundImage(makeImage('https://link_to_my_image.png'))
    .setTextContent(makePlainText('Test Text'))
    .build();

 this.response.speak('OK.').

 audioPlayerPlay(
    'REPLACE_ALL', 
    stream.url, 
    stream.url, 
    null, 
    0)
    .renderTemplate(template);

 this.emit(':responseReady');  
 }

I have been looking at this page https://developer.amazon.com/docs/custom-skills/audioplayer-interface-reference.html but cannot understand how to convert the structure of what is on that page into my code. I assume that, from the code on the page :

{
  "type": "AudioPlayer.Play",
  "playBehavior": "valid playBehavior value such as ENQUEUE",
  "audioItem": {
    "stream": {
      "url": "https://url-of-the-stream-to-play",
      "token": "opaque token representing this stream",
      "expectedPreviousToken": "opaque token representing the previous stream",
      "offsetInMilliseconds": 0
    },
    "metadata": {
      "title": "title of the track to display",
      "subtitle": "subtitle of the track to display",
      "art": {
        "sources": [
          {
            "url": "https://url-of-the-album-art-image.png"
          }
        ]
      },
      "backgroundImage": {
        "sources": [
          {
            "url": "https://url-of-the-background-image.png"
          }
        ]
      }
    }
  }
}

I somehow need to get this part :

"metadata": {
          "title": "title of the track to display",
          "subtitle": "subtitle of the track to display",
          "art": {
            "sources": [
              {
                "url": "https://url-of-the-album-art-image.png"
              }
            ]
          },

Into this block of my code :

audioPlayerPlay(
        'REPLACE_ALL', 
        streamInfo.url, 
        streamInfo.url, 
        null, 
        0)
        .renderTemplate(template);

(and could probably lose the .renderTemplate(template); part as it only flashes up briefly before the 'Now Playing' screen loads anyway.

Any ideas on how to achieve this?

Thanks!

Update :

I have added the following to index.js:

var metadata = { 
    title: "title of the track to display",
    subtitle: "subtitle of the track to display",
    art: { 
        sources: {
            url: "https://url-of-the-album-art-image.png"
            } 
        }
    };

And modified the audioPlayer as follows :

audioPlayerPlay(
    'REPLACE_ALL', 
    stream.url, 
    stream.url, 
    null, 
    0,
    metadata)
    .renderTemplate(template);

And modified the responseBuilder.js as indicated:

audioPlayerPlay(behavior, url, token, expectedPreviousToken, offsetInMilliseconds, metadata) {
    const audioPlayerDirective = {
        type : DIRECTIVE_TYPES.AUDIOPLAYER.PLAY,
        playBehavior: behavior,
        audioItem: {
            stream: {
                url: url,
                token: token,
                expectedPreviousToken: expectedPreviousToken,
                offsetInMilliseconds: offsetInMilliseconds,   
                metadata : metadata 
            }
        }
    };

    this._addDirective(audioPlayerDirective);
    return this;
}

But I'm still not getting anything displayed on the 'Now Playing' screen.

Summary

Answer 1

For some reason the Echo Show is not updating in realtime and needs to be rebooted before it will show whatever is passed in the metadata variable, which is why I wasn't seeing any results.

Simply passing a variable as such works fine. I just need to find out why the content gets stuck on the 'Now Playing' screen and requires a reboot to work.

var "metadata": {
      "title": "title of the track to display",
      "subtitle": "subtitle of the track to display",
      "art": {
        "sources": [
          {
            "url": "https://url-of-the-album-art-image.png"
          }
        ]
      },

Summary

Answer 2

Just define your metadata as below. And pass it as a 6th argument to audioPlayerPlay;

"metadata": {
          "title": "title of the track to display",
          "subtitle": "subtitle of the track to display",
          "art": {
            "sources": [
              {
                "url": "https://url-of-the-album-art-image.png"
              }
            ]
          },

audioPlayerPlay(
        'REPLACE_ALL', 
        streamInfo.url, 
        streamInfo.url, 
        null, 
        0,metadata)

P.S. For this to work properly, You have to modify your node modules which you ll be zipping and uploading to lambda.

steps - Go to your node_modules\alexa-sdk\lib and open responseBuilder file in it. And modify the code as follows-

audioPlayerPlay(behavior, url, token, expectedPreviousToken, offsetInMilliseconds, **metadata**) {
        const audioPlayerDirective = {
            type : DIRECTIVE_TYPES.AUDIOPLAYER.PLAY,
            playBehavior: behavior,
            audioItem: {
                stream: {
                    url: url,
                    token: token,
                    expectedPreviousToken: expectedPreviousToken,
                    offsetInMilliseconds: offsetInMilliseconds
                },
                **metadata : metadata**
            }
        };

        this._addDirective(audioPlayerDirective);
        return this;
    }

P.S. - The node module modifications required only if you are using alexa-sdk version 1.

Spiro

Thank you, I'll check this later, appreciate you taking the time to reply. – Summary

I have made the changes you suggested, but am still not seeing anything displayed on the 'Now Playing' screen, just the name of the Skill. Is there anything else you can think of that might resolve this? Also, not sure if I have added the metadata fields correctly? Thank you again for your time. – Summary

Answer 3

I know it's been years since this question was originally posted, but for those like me who stumble upon this now, make sure you use a unique token in the play directive because metadata is cached using that token.

See the yellow Important note in the following section https://developer.amazon.com/en-US/docs/alexa/custom-skills/audioplayer-interface-reference.html#images

Important: The metadata for a given audio stream is identified by the audioItem.stream.token included in the Play directive. Note that the metadata associated with a particular audioItem.stream.token may be cached in the Alexa service for up to five days, so changes to the metadata (such as a different image, or a change to the title text) may not be reflected immediately on the device. For instance, you may notice this when testing if you experiment with different images or title text for the same audio stream. You can send a new Play directive with a different audioItem.stream.token to clear the cache.

And an example payload with a token:

{
  "type": "AudioPlayer.Play",
  "playBehavior": "valid playBehavior value such as ENQUEUE",
  "audioItem": {
    "stream": {     
      "url": "https://cdn.example.com/url-of-the-stream-to-play",
      "token": "opaque token representing this stream",
      "expectedPreviousToken": "opaque token representing the previous stream",
      "offsetInMilliseconds": 0,
      "captionData":{
         "content": "WEBVTT\n\n00:00.000 --> 00:02.107\n<00:00.006>My <00:00.0192>Audio <00:01.232>Captions.\n",
         "type": "WEBVTT"
      }
   },
    "metadata": {
      "title": "title of the track to display",
      "subtitle": "subtitle of the track to display",
      "art": {
        "sources": [
          {
            "url": "https://cdn.example.com/url-of-the-album-art-image.png"
          }
        ]
      },
      "backgroundImage": {
        "sources": [
          {
            "url": "https://cdn.example.com/url-of-the-background-image.png"
          }
        ]
      }
    }
  }
}

Phuongphycology