意外と簡単！ JavaScriptを使ってWebで簡単に音声操作

#JavaScript

記事をシェア：

コピー

こんにちは。都築です。

先日ブログでも公開されましたが、2社合同LTで「Webで簡単に音声操作」についてライトニングなトークをしてきました。

今回はその「Webで簡単に音声操作」について、ご説明したいと思います。

音声認識のサンプル

まず音声認識とはどのような感じかサンプルを作成しました。
音声認識サンプル

上記サンプルの「音声認識開始」ボタンをクリックすると音声認識が開始され、マイクデバイスの使用許可が求められます。

許可を選択すると、ブラウザのタブに録音状態を示すアイコンが表示され、アイコンが表示されている間、ブラウザが音声録音状態となります。

サンプルでは「ブログ」や「ビデオ」などの単語をブラウザに発声すると、単語に応じた挙動が行われるようになっていますので、ぜひ色々発声して試して頂ければと思います。

Web Speech Recognition APIを利用した音声認識の実装

次に音声認識の実装についてご説明していきたいと思います。

こちらは「Web Speech Recognition API」というAPIを利用します。

下記をご覧頂いて分かるように、インスタンス生成、パラメータの設定、開始だけで簡単に音声認識を開始することが出来ます。

//音声認識APIのインスタンス生成
var speech = new webkitSpeechRecognition();

//音声認識APIにパラメータを設定
speech.lang = "ja";　　　　　　　// 音声認識を行う言語
speech.continuous = false;　　 // 連続音節の音声認識を行うか
speech.maxAlternatives = 1;　 // 認識結果候補の個数

//音声認識APIを開始
speech.start();

speech.start(); が実行されたタイミングで、マイクデバイスの許可が求められ、音声認識が開始されます。

基本的に音声を認識するだけですが、日本語で発声されることが分かっている場合など、状況に応じて音声認識の精度を高める為のパラメータが用意されています。

音声認識結果の取得

次に録音した音声結果を取得する方法は下記のように記述します。

speech.addEventListener('result',  function(e) {
  var text = e.results[0][0].transcript; 
});

上記で生成したspeechでresultというイベントを検知するようにしています。

このe.resultsが音声認識の結果となっていますが、ご覧のように配列の入れ子で返ってきます。

1つ目の配列は、認識した音声が音節単位に分割されて格納されています。
例えば、2つの文章を音声入力した場合、発音の区切り目から文章ごとに分割された形で、配列に格納されます。
なお、連続音節認識をさせる場合は、continuousパラメータにtrueを指定し録音を行います。

2つ目の配列は、変換候補が格納されています。
例えば「こんにちは」と発音すると、「こんにちは」「今日は」などが候補として配列に格納されます。
複数の変換候補を求める場合は、maxAlternativesパラメータに要求する候補数を指定します。

いくつもの文章を認識する場合や、認識の精度を増すためにはこれらの配列を走査した実装が必要となりますが、1つの文章で最も候補として可能性が高い音声を読み取りたい場合は、単純にそれぞれ配列の1番目を読み取れば良いようです。

音声出力のサンプル

次に音声出力ですが、こちらもサンプルを作成しましたので、お試し頂ければと思います。
音声出力サンプル

Web Speech Synthesis APIを利用した音声出力の実装

上記音声出力の実装ですが、こちらは「Web Speech Synthesis API」というAPIを利用しています。

下記をご覧頂いて分かるように、インスタンス生成、パラメータの設定、開始だけという簡単に音声出力を実施することが出来ます。

//音声出力APIのインスタンス生成
var synthes = new SpeechSynthesisUtterance();

//音声出力APIにパラメータを設定
synthes.voiceURI = 1;            // 出力する音声の種類 
synthes.volume = 1;              // 出力する音声のボリューム
synthes.rate = 1;                // 出力する音声の速さ
synthes.pitch = 2;               // 出力する音声のピッチ(高さ)
synthes.text = '出力する文章';     // 出力する文章
synthes.lang = 'ja-JP';          // 出力する音声の言語

//音声出力
speechSynthesis.speak( synthes );

やはり機械的な音声ではありますが、上記パラメータを変更することで
面白い音声で出力することが出来るので、遊びとしても面白いのではないでしょうか。