title: alexa - audioPlayer.Play issue displaying content on Echo Show Now Playing screen
body: <p>I am having issues understanding how to display images on the Echo Show inside the audioPlayer 'Now Playing' screen.</p>
  
  <p>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.</p>
  
  <p>This is part of the code (which works as per above):</p>
  
  <pre><code>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');  
   }
  </code></pre>
  
  <p>I have been looking at this page <a href="https://developer.amazon.com/docs/custom-skills/audioplayer-interface-reference.html" rel="noreferrer">https://developer.amazon.com/docs/custom-skills/audioplayer-interface-reference.html</a> 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 :</p>
  
  <pre><code>{
    "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"
            }
          ]
        }
      }
    }
  }
  </code></pre>
  
  <p>I somehow need to get this part :</p>
  
  <pre><code>"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"
                }
              ]
            },
  </code></pre>
  
  <p>Into this block of my code :</p>
  
  <pre><code>audioPlayerPlay(
          'REPLACE_ALL', 
          streamInfo.url, 
          streamInfo.url, 
          null, 
          0)
          .renderTemplate(template);
  </code></pre>
  
  <p>(and could probably lose the <code>.renderTemplate(template);</code> part as it only flashes up briefly before the 'Now Playing' screen loads anyway.</p>
  
  <p>Any ideas on how to achieve this?</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update :</strong> </p>
  
  <p>I have added the following to index.js:</p>
  
  <pre><code>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"
              } 
          }
      };
  </code></pre>
  
  <p>And modified the audioPlayer as follows :</p>
  
  <pre><code>audioPlayerPlay(
      'REPLACE_ALL', 
      stream.url, 
      stream.url, 
      null, 
      0,
      metadata)
      .renderTemplate(template);
  </code></pre>
  
  <p>And modified the responseBuilder.js as indicated:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>But I'm still not getting anything displayed on the 'Now Playing' screen.</p>