何かわくわくしたこと

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

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

Echo Spotで石炭ホッパーセットを買った話

Echo Spotを買ってからと言うもの、「あ、これはスマートスピーカーついにきたね感」に包まれている日々なのですが、ついにAlexaを介した音声ショッピングにも手を出してしまいました。

 

購入したものは、ぐるぐるぐるぐるで有名な

「トーマスとマーリンの石炭ホッパーセット」

www.youtube.com

プラレールのイベントでもらったDVDについているこの映像が息子の心を掴んで離しません。歌に合わせて歌うのはもちろん、もはや彼が「トーマス」って言った時は本編ではなく、こちらを指している始末。(むしろ、本編を見せると「違う」って言って怒る。)

 

 

これ欲しいんだろうなと思いつつ、家のスペースもそんなないし、プラレールはハマったらやばそうだしで、そんなこんなで買うかどうか悩んでいたのですが、ふと家族での団欒中に魔が差して「Alexa、石炭ホッパーを検索して」と話しかけてしまったのです。

 

f:id:mitztan:20180812000945j:plain        f:id:mitztan:20180812001030j:plain

 

うっわー普通にスムーズに出てきた。画面を見た息子から聞こえる「トーマス!」の声。しかも44%OFFなり。。。

私「これを購入して」

f:id:mitztan:20180812001337j:plain

ああ、購入できてしまった。明日到着だね。もうこれで後戻りできないね。。。

 

やっぱり画像があるとしっかり確認できるのでいいですね!音声だけだったらちょっと不安でしたが、これなら音声ショッピングできます。このスムーズな購入体験はくせになりそうで、ついついEcho Spotに話しかけてしまいそう。。。ちなみにAmazonだと高いので別で買いたいなって場合は「○○を買い物リストに入れて」で、別管理もできます。さすが顧客第一主義で、何が何でも買ってねじゃないところがいいね。

 

 

これも含めて、ディスプレイがついたスマートスピーカに思うところなのですが、

・人は話しかける時に、相手を見て話しかけているようで、音声だけのスマートスピーカよりも話かけやすいです。(特に嫁が言ってた。)

・「そもそもディスプレイがあるなら、スマホIpadで良くない?」って考えは全然違いました。音声からスタートってのが違ってまして、人間が誰かとコミュニケーション取る時って、声をかけて(音声)→相手の反応を見る(音声、画像)と思うのですが、それと同じUIになっているのでとても優しく感じます。

・逆にスマホだと、スマホ持って、ロックを解除して、アプリを立ち上げて、検索してって、実は結構な手間がかかっているのですよね。。。

 

まだまだ使い始めてちょっとなので、さらに使い倒していきたいと思います。(プラレールの購入しすぎには要注意。)