Web Speech APIなら、数行で、ブラウザ上で、無料で音声認識・音声合成ができる
はじめに
この記事ではWeb Speech APIによる音声認識・音声合成機能について、ブラウザ対応状況・利用方法を紹介します。
Web Speech APIとは
各Webブラウザが提供する、音声認識機能・音声合成機能です。W3Cドラフト
音声認識機能
マイクからの音声をテキスト化します。Google Chrome(v25~)、Edge(v75~)、Chrome for Android(v4~)などが対応しています。Firefox、Safari、Android Browserなどについては2019年05月15日現在対応していません。
音声合成機能
テキストを音声として読み上げ、スピーカーなどへ出力します。Edge、 Firefox、 Chrome、 Safari、 Opera、Firefox Androidなどが対応しています。 IE、Android 版 Operaなどについては2019年05月15日現在対応していません。
追記(2019-05-16): Firefox Androidでは対応していないと書きましたが、誤りです。 caniuse.comとMDN web docsで対応状況に関する記述に大きな差異が見られます。情報を提供して下さった@makoto_katoさん、ありがとうございました。
とりあえず始める
音声認識機能
Web Speech APIのSpeechRecognitionインターフェイスを利用します。Google Chromeなどのwebkit系のブラウザで利用する場合は、プレフィックスが付与されたwindow.webkitSpeechRecognitionを参照します。
- まず、以下をGoogle Chromeのデベロッパーコンソールで実行しましょう。
音声認識を行うために必要なことは、webkitSpeechRecognitionインスタンスを作成し、各種設定を行った上で、.start()メソッドを実行することだけです。 10行に満たないコードで音声認識ができることに感動します。
var rec = new webkitSpeechRecognition();rec.continuous = false; // 後述rec.interimResults = false; // trueにすると認識途中の結果も返すrec.lang = 'ja-JP'; // 言語を指定するrec.maxAlternatives = 1; // 結果候補の最大数(デフォルトは1)rec.onresult = e => {// 認識結果がSpeechRecognitionEventインスタンスとして渡されます// 認識した言葉を表示console.log(e.results[0][0].transcript)rec.stop() // 認識が完了したら終了する}rec.start() // 認識を開始します
⚠ なお、Chroniumユーザの方は、音声認識機能はサポートされていない点に注意してください。
-
次に、ブラウザに対してマイクの使用を許可しましょう。
おそらく、以下のようなポップアップが表示されますので、これを許可しましょう。
-
喋りましょう。
-
デベロッパーコンソールに喋った内容が表示されます。
⚠なお、一度認識を行った上で、もう一度認識を行うためには、rec.stop()メソッドを実行して音声認識を停止した上で、再度rec.start()メソッドを実行する必要があります。
もしくは、continuousオプションをtrueにすることで、連続的にノンストップで認識し続けることができます。
この場合、ページがロードされてから現在までに認識した結果の一覧が、webkitSpeechRecognition.onresultへ渡されるイベントeのe.resultsに格納されます。
var rec = new webkitSpeechRecognition();rec.continuous = true; // <--- これ!!!rec.interimResults = false;rec.lang = 'ja-JP'; // 言語を指定するrec.onresult = e => {// 最後に認識した言葉を表示console.log(e.results[e.results.length - 1][0].transcript)}rec.start() // 認識を開始します
ただし、continuousオプションを利用するためには、https://以下で実行する必要があります。無料でhttpsのWebページを提供するには、Netlifyがおすすめです。
音声合成機能
Web Speech APIのSpeechSynthesisUtteranceインターフェイスを利用します。
以下を任意のWebブラウザのデベロッパーコンソール上で実行するだけで、動作が確認できると思います。
var u = new SpeechSynthesisUtterance();u.text = "こんにちは"; // 発話する内容を指定するu.lang = 'ja-JP'; // 言語を指定するu.rate = 1.0; // 発話速度を指定するspeechSynthesis.speak(u); // 喋らせる
⚠ただし、一部のWebブラウザでは、一度ユーザがそのページでクリックなどのアクションを行った後でなければ音声合成を実行しない仕様になっています。
実行例
音声認識
https://codepen.io/KilledByNLP/pen/dEvbvRに実装・デモを公開しました。 Webブラウザの仕様上、このデモは直接ページを開かないと実行できません。
音声合成
https://codepen.io/KilledByNLP/pen/rgyNMwに実装・デモを公開しました。 「オタク」のイントネーションがすごく気になります。
