前回に続いて、コードを書いてAudioPlayerをきちんと理解しよう、という取り組みです。
今回は、複数の曲を扱う前に、少しだけ寄り道してアートワークを表示させてみたいと思います。
曲のメタデータ
AddAudioPlayerDirectiveにはオプションでもう一つ引数があります。
addAudioPlayerPlayDirective(playBehavior: interfaces.audioplayer.PlayBehavior, url: string, token: string, offsetInMilliseconds: number, expectedPreviousToken?: string, audioItemMetadata? : AudioItemMetadata): this;
最後のaudioItemMetadata、これを指定すると、画面付きデバイス等で曲のメタデータを表示するためのものです。
ということで早速やってみましょう。以下のコードを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のアートワーク表示を試してみました。
次回は複数の曲を使ってやってみたいと思います。
画像は以下のものを使用させていただきました。ありがとうございます。
