Chapter 03

AudioPlayerスキルを作ってみよう!

kun432
kun432
2020.10.28に更新

作成するサンプルスキル

今回作成するサンプルスキルについて、最初にかんたんに説明します。

スキルの実行イメージ

スキルを実行する場合のイメージはこんな感じです。

環境音を再生するだけのとてもシンプルなスキルです。これなら誰にでも使ってもらえそうですね!

スキルの完成図

最初にスキルの完成図を見てもらいましょう。

はい、たったの5個のブロックでできています。かんたんにできそうな気がしてきませんか?

では順に説明していきます。

プロジェクトの新規作成

ダッシュボードで"Create Project"をクリックします。

プロジェクト名を入力します。今回は「秋の夜の音」にしました。"Continue"をクリックします。

Alexaスキル or Googleアクションのどちらを作るのかを選択します。今回はAlexaスキルを作成しますので、"Amazon Alexa"をクリックします。

呼び出し名と言語・国を選択します。呼び出し名が「アレクサ、◯◯◯をひらいて」でスキルを起動させるときの名前です。言語・国は"JAPANESE(JP)"だけが選択されている状態にすればOKです。

設定したら"Create Project"をクリックします。

プロジェクトが作成されました。

起動直後のメッセージ

ここからはスキルの実行イメージどおりに作っていきます。まず最初にAlexaに起動直後のメッセージを喋らせましょう。Speak Blockをドラッグ・アンド・ドロップして、最初からあるStart Blockと線でつなぎます。

Speak BlockにAlexaに発話させる内容を入力します。

秋の訪れを感じる、いい季節になりましたねー。しいーっ。ほら、耳を澄ませてみてください。

少しだけ工夫しましょう。「しいーっ。ほら、耳を澄ませてみてください。」の部分を選択して、すぐ下の"ADD EFFECT"をクリックします。

メニューが出てきますので、一番下にスクロールして"Whisper"をクリックします。

選択した部分が、HTMLに似たタグで囲まれました。これが「SSML」です。SSMLを使うと、Alexaの発話にいろんな効果を与えることができます。たくさんの種類のSSMLタグがありますが、Voiceflowだとメニューから選択するだけで設定が可能です。

もう少しだけ。「しいーっ。」と「ほら、・・・」の間にカーソルを置いて、"ADD EFFECT"をクリック。

"Break"にカーソルを合わせると、さらにメニューが出てくるので、一番上の"1s"と表示されているところに"1s"と入力してEnterします。

はい、SSMlタグが挿入されました。このように、SSMLタグには、タグで括るものと、挿入するものがあるということですね。

実際にどうなるかは後ほどテストで試してみましょう。

Speak Blockはこれで終わりです。

Stream Blockを使ったサウンドの再生

いよいよ今回のキモであるサウンドの再生部分に進みましょう。

メニューの中にあるChannelをクリックすると、Alexaでしか使えないブロックが表示されます。一番上にあるStream Blockを先ほど設定したSpeak Blockの右側に配置して線でつないでください。

Stream Blockのメニューを見てみましょう。

一番上に"Audio Url or ..."と書いてあるところがあります。ここにオーディオファイルのURLを入力することで、オーディオが再生されるというわけです。その他にも設定できる箇所はいろいろありますが、後ほど説明します。

サンプルのオーディオファイルをこちらで用意しました。以下のURLをコピペしてください。

https://www.dropbox.com/s/2nllq1niqxtymlm/autumn3.mp3?dl=1

※オーディオは株式会社VSQ様のフリー効果音素材を使用させていただきました。

これで、スキルが起動したら、Alexaが喋ってその後に環境音が再生されるようになります。実はこれでサウンドを再生するスキルとしてはほぼ8割方終わっています!

では早速テストで試してみましょう。画面右上の"UPload to Alexa"をクリックして、プロジェクトをAlexa開発者コンソールにアップロードします。

初めてアップロードする場合は、最初にアカウント連携が必要です。"Connect Amazon"をクリックします。

ログイン画面が表示されますので、amazon.co.jpのアカウントとパスワードを入力して「ログイン」をクリックします。

権限の確認画面が表示されます。「許可」をクリックします。

アップロードが行われます。100%になるまで待ってください。

以下のように表示されれば、アップロードが完了しています。最初に説明したとおり、AudioPlayerスキルの場合、Alexa開発者コンソールのテストシミュレータを使ってのテストはできませんが、スキルが有効になっているかを確認しておきましょう。"Test on Alexa Simulator"をクリックします。

テストシミュレータ画面が開きます。左上に注目してください。

「スキルテストが有効になっているステージ」のところが「開発中」になっていればOKです。

「非公開」になっている場合はテストができませんので、「開発中」に変更してください。

テスト

では、Amazon Echoの実機、もしくはAlexaアプリでテストしてみてください。

スキルの起動

以下のように呼びかけてください。

アレクサ、秋の夜の音をひらいて

Alexaが起動後のメッセージを喋ったあとにオーディオが再生されます。さきほどSSMLで設定したところがどういうふうに話されるか、にも注目してみてください。

オーディオ再生の一時停止

以下のように呼びかけてください。

アレクサ、ストップ
アレクサ、一時停止

オーディオの再生が一時停止します。なお、オーディオが再生している時は、スキル名を付けて呼びかける必要はありません。

オーディオ再生の再開

以下のように呼びかけてください。

アレクサ、再開
アレクサ、続けて

AudioPlayerスキルでは最後に一時停止した状態を記憶しており、上記のように呼びかけることにより一時停止した場所から再開されます。この場合もスキル名を付けて呼びかける必要はありません。

Stream Blockの"Next/Previous"は?

ところでStream Blockには”Next”と"Previous"というのがあって、ここにブロックをつなげれそうですね。これは何に使うのでしょうか?

これは、複数の曲を順番に再生するような場合に、

  • 次の曲にスキップ (「アレクサ、次にスキップして」)
  • 前の曲に戻る (「アレクサ、前に戻って」)

というのを実現するためにあります。詳しくは「応用編2:複数のサウンドを順番に再生する」でご紹介します。

今回のサンプルでは、オーディオファイルは1ファイルだけしかつかいませんので不要です。ただし、これらはAlexaの標準機能なので、ユーザからの発話には応答してしまいます。そこで以下のように、「使えない」ということをユーザに伝えて、再度Stream Blockに戻して再生を継続するようにしましょう。

Speak BlockをStream Blockの上あたりに配置します。

Stream Blockの"Next"と"Previous"の両方から、Speak Blockに線をつなげます。

Speak BlockからStream Blockに線を引いて戻してあげます。

最後にSpeak Blockに以下を入力します。

その機能は使えないんです。ごめんなさい。

これでOKです。

一時停止する際にメッセージを喋らせる

テストのときに、一時停止と再開について説明しました。一時停止の「アレクサ、ストップ」「アレクサ、一時停止」というのは、あまり使ってない人でもなんとなく雰囲気でわかると思うんですが、「アレクサ、再開」で再開できるというのは案外知らない人も多いと思います。そこで、一時停止した場合に再開のやりかたをあわせて伝えておくことにします。

Stream Blockをクリックして設定画面を開き、設定の一番下にある"・・・"をクリックします。

"Add Custom Pause"というのが表示されますので、これをクリックします。

Stream Blockの最後に"Pause"というのが新たに追加されました!これが「ストップ」「一時停止」といった場合のフローになるわけですね。

ここにSpeak Blockをつなげて、Alexaの発話を入力します。

わかりました。虫さんたちもちょっと休憩ですね。再開する場合には、アレクサ、再開、と言ってくださいね。

これで終わりです。アップロードしてテストしてみてください。

まとめ

VoiceflowでAudioPlayerスキル、いかがでしたか?使うのもかんたんですが、作るのものかんたんですよね。ぜひ心地よいサウンドを奏でるスキルを作ってみてください!

もっと色々やってみたい方は応用編に進んでみてください。