何かわくわくしたこと

あーこれ何かわくわくしたなあってことを話します

Alexaスキルで音楽が流れている間、画像を表示する。(echo spot)

Alexa skillでaudioPlayerの音楽(音声)を流しながら、echo spotの画面に好きな画像を表示したいって結構あるかなと思ったのですが、意外にハマったポイントが多かったので、まとめておきました。

ご参考にさせていただいたリンク
AudioPlayerインターフェースのリファレンス | Custom Skills
alexa - audioPlayer.Play issue displaying content on Echo Show Now Playing screen - Stack Overflow
Alexaで萌えタバタタイマーを作った(AudioPlayerを利用) - atskimura-memo

ハマりポイント
1.metadataがSDKで定義されていない。
nodeのSDKで定義されている、audioPlayerPlay内には画像情報のmetadataが含まれていません。なので、これはそのままではダメなので、SDKを拡張する必要があります。

2.renderTemplateは使えない。
画像の表示で調べているとrenderTemplateが見つかると思うのですがこれは罠です。audio再生中は、audioPlayerPlayで定義されている画像が表示されるため、こちらを使っても一瞬画像が表示されて、audioPlayの方に戻ってしまいます。(厄介なのはシミュレーターだと、AudioPlayerが動かないので画像が表示されるように見えてしまうところ。。。)

3.tokenが変わらないと読み込みに行かない
audioPlayerPlay内のtokenが同じだと、どうも2回目以降データを読み込みに行かないみたいで、ちゃんと記述変えたのに全然反映されないとなることがあります。変更加えるたびにtokenの値を変える必要があります。


実際には以下のように記述するだけで簡単に可能です。ただアートワークなので画像が暗いのと、title/subtitleを両方とも空白にすることができないのは仕様なので諦めましょう。

・responseBuilder.js内のaudioPlayerPlayの定義でmetadataを引数と、audioPlayerDirectiveの中に追加します。

alexa-sdk/lib/responseBuilder.js

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;
    }

・index.js内でmetadataを定義し、audioPlayerPlayの引数にも追加します。
index.js

     'PlayAudio': function () {
        const audioUrl = 'https://xxx';  //audioファイルのurl
        const metadata = {
          'title': 'title',
          'subtitle':'subtitle',
          'art': {
            'sources': [
              {
                'url': 'https://xxx' //画像ファイルのurl
              }
            ]
            }
         };

        this.response.audioPlayerPlay("REPLACE_ALL",audioUrl,"xxxx",null,0,metadata)
        this.emit(':responseReady');
    },



これで好きなキャラや芸能人とキャッキャする自分だけのスキルを作りましょうw