今更ながらAlexaのAudio Playerをきちんと理解してみる② 〜アートワークの表示〜

前回に続いて、コードを書いてAudioPlayerをきちんと理解しよう、という取り組みです。

kun432.hatenablog.com

今回は、複数の曲を扱う前に、少しだけ寄り道してアートワークを表示させてみたいと思います。

曲のメタデータ

AddAudioPlayerDirectiveにはオプションでもう一つ引数があります。

addAudioPlayerPlayDirective(playBehavior: interfaces.audioplayer.PlayBehavior, url: string, token: string, offsetInMilliseconds: number, expectedPreviousToken?: string, audioItemMetadata? : AudioItemMetadata): this;

最後のaudioItemMetadata、これを指定すると、画面付きデバイス等で曲のメタデータを表示するためのものです。

https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/audioplayer-interface-reference.html#images:embeded

ということで早速やってみましょう。以下のコードをutil.jsを読み込んだあとぐらいに追加します。画像は今回s3に上げていたものを使いました。

const metadata = {
    "title": "サンプル１",
    "subtitle": "サンプル１の説明です",
    "art": {
        "sources": [
            {
                "contentDescription": "ジャケット画像の説明です",
                "url": "https://xxxxx.s3-ap-northeast-1.amazonaws.com/pic512x512.jpg",
                "widthPixels": 512,
                "heightPixels": 512
            }
        ]
    },
    "backgroundImage": {
        "sources": [
            {
                "contentDescription": "背景画像の説明です",
                "url": "https://xxxxx.s3-ap-northeast-1.amazonaws.com/pic512x512.jpg",
                "widthPixels": 1200,
                "heightPixels": 800
            }
        ]
    }
};

addAudioPlayerPlayDirectiveのところを以下のように変更します。

            .addAudioPlayerPlayDirective('REPLACE_ALL', url, token, 0, null, metadata);

画面付きデバイスでの表示

ではスキルを実行してみます。echo showだとこんな感じになります。

Amazon Musicっぽくなりますね。

開発者コンソールで見ると、レスポンスはこんな感じで返ってきます。

{
    "body": {
        "version": "1.0",
        "response": {
            "outputSpeech": {
                "type": "SSML",
                "ssml": "<speak>わかりました。楽曲を再生します。</speak>"
            },
            "directives": [
                {
                    "type": "AudioPlayer.Play",
                    "playBehavior": "REPLACE_ALL",
                    "audioItem": {
                        "stream": {
                            "token": "1",
                            "url": "https://amzn1-ask-skill-xxxxxxxx-xxxx-buildsnapshotbucket-xxxxxxxxxxxx.s3.amazonaws.com/Media/hiking.mp3?X-Amz-Algorithm=...",
                            "offsetInMilliseconds": 0
                        },
                        "metadata": {
                            "title": "サンプル１",
                            "subtitle": "サンプル１の説明です",
                            "art": {
                                "sources": [
                                    {
                                        "url": "https://xxxxx.s3-ap-northeast-1.amazonaws.com/pic512x512.jpg",
                                        "widthPixels": 512,
                                        "heightPixels": 512
                                    }
                                ]
                            },
                            "backgroundImage": {
                                "sources": [
                                    {
                                        "url": "https://xxxxx.s3-ap-northeast-1.amazonaws.com/pic1200x800.jpg",
                                        "widthPixels": 1200,
                                        "heightPixels": 800
                                    }
                                ]
                            }
                        }
                    }
                }
            ],
            "type": "_DEFAULT_RESPONSE"
        },
        "sessionAttributes": {},
        "userAgent": "ask-node/2.7.0 Node/v10.19.0"
    }
}

ということで、今日はAudioPlayerのアートワーク表示を試してみました。

次回は複数の曲を使ってやってみたいと思います。

画像は以下のものを使用させていただきました。ありがとうございます。

https://pixabay.com/ja/users/bertvthul-1134851/