ウキウキ社会人ブログ

かつては就活日記　あるときは卒論日記　そして今は……

推しと会話を試みる女オタク(Web Speech APIを使って遊ぼう)

意識高い

※独学うんちマンによるブログです、技術の参考にはしないでね

みなさんこんにちは、今日は音声認識で遊んだお話です。 卒論は進んでません

Web Speech API

このブログを読んでくれる人は、多分webについての知識が無い人も多いと思いますが、めんどくさいので基本の説明は省略します。 Web Speech APIを使うと、ブラウザ上で音声合成と音声認識ができるようになります。音声認識とは、マイクで拾った声を分析してテキストデータに直してくれるヤツです。siriとかを思い浮かべるとわかりやすいと思いますが、音声認識はあくまでも声からどの単語かを判断するところまでで、会話とかは別のアレです。siriでいうと、ユーザーが喋った単語がまず画面上に表示されますね、そこまでが音声認識でそこからsiriがどんな返事をするとかの処理はまた別。ってインターネットに書いてた。

developer.mozilla.org

今回はこれを用いて、ユーザーの発話した単語に対応する音声を再生することで、擬似会話を楽しみました。音声合成は触ってません。楽しそうですのでいつかやってみたいですね。

Q なんでWeb Speech APIを使ったの？

A わかりやすそうだったから

参考にさせていただいた記事

以下の2つの記事を参考にさせていただきました。 これらを読めばだいたいわかります（私はわかった気になりました）

qiita.com

paiza.hatenablog.com

2つ目の記事のコードを参考にしています。

さっそく推しと会話しよう！(^_^)/

今回は、逢坂紘夢くんと会話できるようにしてみようと思います！ 今年の誕生日にお祝いするために作ったパネルを用意します。

f:id:misomac:20181212160652j:plain
いきなりどギツイ
こちらのパネルは１００均で買ってきたA3くらいの大きさの貼りパネもどき２枚で作っています。みんなも作ろう！(^_^)

まず、適当に音声データを用意します。 今回はボイきらのルーム音声を使いましょう。朝開いたときの「おはよう」みたいなやつと、お昼のやつと、あと寝る前の「おやすみ＾＾」みたいなやつにしました。システム設定でBGMの音量をゼロにして、パソコンのマイクで直接録音します。上等な線は持ってないので原始的な方法です。適当に録音して適当にカットしましょう。音声データの形式も適当なのでmp3です。 htmlでaudioを用いて音声データを読み込むところを書きます。こんな感じ

  <audio preload="auto" id="oyasumi">
    <source src="sound/oyasumi.mp3" type="audio/mp3">
  </audio>
  <audio preload="auto" id="ohayo">
    <source src="sound/ohayo.mp3" type="audio/mp3">
  </audio>
  <audio preload="auto" id="ohiru">
    <source src="sound/ohiru.mp3" type="audio/mp3">
  </audio>

適当ですね！＾＾とりあえず動けばなんでもいいんですよ。

次に、jsのどっかで、適当な連想配列を宣言します。これは、音声認識で読み取った単語をキーに、あらかじめ読み込んだ音声データを持ってこれるようにしています。

var onsei = {
  "おやすみ": "oyasumi",
  "おはよう": "ohayo",
  "いただきます": "ohiru"
};

適当な命名するのやめろっていつも言ってるでしょ！ そして、speechのリザルトイベントの処理をこんな感じにしてみました あ　speechって参考にさせていただいた記事のままなだけですので

speech.addEventListener('result', function(e) {
 //音声認識終わったってわかるようにコンソールに表示
  console.log("音声認識終了"); 

 //認識された単語をtextという変数に入れる
  var text = e.results[0][0].transcript;

 //ここから再生周りのあれ
  if (onsei[text] != undefined) {
    var voice = document.getElementById(onsei[text]);
    voice.play();
    voice.addEventListener('ended', function(e) {
      voice.currentTime = 0;
      console.log("再生終了");
    });
  }
});

認識された単語に対応するデータが連想配列onsei内に存在する場合、そのデータをidとしてあらかじめ読み込んでいた音声データを取得し、voiceという変数に入れ、再生しています。有識者に怒られそうだけどだいたいこんな感じ。

これで、音声認識で得られた単語に対応するmp3ファイルが再生されるようになりました。あとは、適当にローカルサーバー立てて(htmlファイルを直接Chromeで開いて動かしてたら毎回マイクの許可求められてめんどくさくなったので…)、パソコンにあらかじめ決めておいた単語を話しかければ…！！

やった〜！！(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)(^o^)

ま、このままだとパソコンでブラウザ開いてないと動かないとか問題があるんですけどね　スピーカー買ってきてパネル裏に設置するなり、ラズパイとかでもっと本格的にスマートスピーカー作るくらいの勢いでやればもっと生活が豊かになると思います。時間と金が無いのでやりませんが

とりあえず、手元にパソコンさえあれば手軽に遊べましたよという記事でした。レッツエンジョイ

音声認識という夢女の希望

オタクなのでこういう楽しみ方をしましたが、例えば不動産サイトで「練馬区！」とか話しかけたら練馬区の家が出てくるとか、そういう使い方もできますね。昨今は家電などにも話しかけられるようになってきてるので、今後こういう技術が女性向けコンテンツでも広く使われるようになる時代がくるかもしれませんね。知らないだけであるのかな。MakeSのセイくんとかも、音声認識で会話できるようになるともっと幅広がりそう。選択肢を選ぶゲームとかなら、音声操作にするのも容易なきがする　頼むで〜＾＾

あとはエロコンテンツとかでも音声認識を使うのは有効そうだなと思ったりします。急に何の話する気だよ、って感じですけど、例えばエロ音声で「どこを舐めて欲しい？」みたいなセリフに「耳…」って返事したら耳の方から舐めてる音がするとか。これならハンズフリーで選択制ストーリー楽しめるんじゃないでしょうか？最後に気持ち悪い話すんのやめろ　終わりです