お問い合わせ

Web Speech APIの使い方は簡単？幅広い用途に対応できるのか

UI開発者 泉口

Web Speech APIとは

Web Speech APIとは、Speech API Community Groupによって策定されたJavaScript APIの一つで、Webブラウザにおけるテキストデータの音声出力や、音声認識による入力を可能にします。音声認識で有名なiOSにおけるSiriや、Androidなどに搭載されている音声検索および、Google Speech API、Cortanaなど、これらに近しい機能をJavaScriptとブラウザだけで実装することができます。

これは、マウスやキーボード以外の入出力インターフェースのアプローチとして、Web Speech API Specificationでは次のようなユースケースが挙げられています。

  • Voice Web Search
  • Speech Command Interface
  • Domain Specific Grammars Contingent on Earlier Inputs
  • Continuous Recognition of Open Dialog
  • Domain Specific Grammars Filling Multiple Input Fields
  • Speech UI present when no visible UI need be present
  • Voice Activity Detection
  • Temporal Structure of Synthesis to Provide Visual Feedback
  • Hello World
  • Speech Translation
  • Speech Enabled Email Client
  • Dialog Systems
  • Multimodal Interaction
  • Speech Driving Directions
  • Multimodal Video Game
  • Multimodal Search

音声検索や入力した音声の多言語翻訳など代表的な用途は当然ながら、昨今ではスマートデバイス単体のカーナビや書籍リーダーなど、より身近で実用的な機能も、Web Speech APIを用いることで提供することが可能になります。

2つのインターフェース

Web Speech APIは、「入力」と「出力」を表す2つのAPIに分類されます。

音声認識インターフェース（The SpeechRecognition Interface）

名前の通りマイクなどから音声を認識し、その結果を返します。2016年現在ではGoogle Chromeなど一部のブラウザのみ対応のみ対応しています。

以下では「認識開始」ボタンを押下後、マイクで入力した音声をテキストエリアに表示する例を記載します。（SpeechRecognitionではなく、webkitSpeechRecognitionである点にご注意ください）

HTML

<div><button id="recognitionStart">認識開始</button></div>
<div><button id="recognitionEnd">認識終了</button></div>
<div><textarea id="recognitionResult"></textarea></div>

JavaScript

var recognition = new webkitSpeechRecognition();
var elmStart = document.getElementById('recognitionStart');
var elmEnd = document.getElementById('recognitionEnd');
var elmResult = document.getElementById('recognitionResult');

recognition.lang = 'ja';
recognition.continuous = true;

recognition.addEventListener('result', function (event) {
    var text = '';

    for (var i = 0; i < event.results.length; i++) {
        text += event.results[i][0].transcript;
    }

    elmResult.value = text;
}, false);

elmStart.addEventListener('click', function () {
    elmResult.value = '';
    recognition.start();
}, false);

elmEnd.addEventListener('click', function () {
    recognition.stop();
}, false);

この例にlocation = 'https://www.google.co.jp/maps/place/' + text;などの遷移先を加えることで、音声認識で得た地名をGoogle Mapsで検索することも可能になります。また、認識の精度が人によって異なる場合や、マイクの収音性能によって変わってしまう可能性もありますが、maxAlternativesプロパティを用いることで変換候補を表示したり、候補の信頼度を示すことができるので、結果表示の際に候補を表示し、選択してもらうなどといった手法で解決することができます。

音声合成インターフェース（The SpeechSynthesis Interface）

音声認識インターフェースとは逆に、指定されたテキストの出力（読み上げ）を行うインターフェースで、発話開始、終了、一時停止、発話の境目などのイベントや、言語、音量、音声ピッチなどのプロパティが存在します。音声認識インターフェースに比べ、Microsoft Edgeや、iOS Safariなど、比較的多くのブラウザに実装されています。

以下では再生ボタンを押下後、textarea要素内の文字列を読み上げる例を記載します。

HTML

<div><button id="SpeechSynthesisStart">再生</button></div>
<div><button id="SpeechSynthesisPause">一時停止</button></div>
<div><button id="SpeechSynthesisStop">停止</button></div>
<div><textarea id="SpeechSynthesisText">Webサイトの構築・運用を中心とした様々なサービスで、コミュニケーションを創造・改善します。</textarea></div>

JavaScript

var utterance = new SpeechSynthesisUtterance();
var elmStart = document.getElementById('SpeechSynthesisStart');
var elmPause = document.getElementById('SpeechSynthesisPause');
var elmStop = document.getElementById('SpeechSynthesisStop');
var elmText = document.getElementById('SpeechSynthesisText');

window.speechSynthesis.onvoiceschanged = function () {
    utterance.voice = speechSynthesis.getVoices()[11];
};

utterance.lang = 'ja-JP';

speechSynthesis.cancel();

elmStart.addEventListener('click', function () {
    if (speechSynthesis.speaking) {
        speechSynthesis.resume();
    } else {
        utterance.text = elmText.value;

        speechSynthesis.speak(utterance);
    }
}, false);

elmPause.addEventListener('click', function () {
    speechSynthesis.pause();
}, false);

elmStop.addEventListener('click', function () {
    speechSynthesis.cancel();
}, false);

speechSynthesis.getVoices()[11]では、voiceURIを「Google 日本語」に変更しています。当該配列内に英語、韓国語、中国語なども含まれているため、言語によって読み上げ音声を変更することも可能です。また、SpeechSynthesisUtteranceのプロパティでは、volume（音量）、rate（読み上げ速度）、pitch（読み上げ音程）などが備わっているため、ユーザー自身で調節できるUIを付与することで、最も聞き取り易い状態を作りだすこともできます。

音声合成インターフェースを使用した簡単な応用例

次のコードは選択したテキストを日本語で読み上げるブックマークレットです。

javascript:(function(w,ssu,ss){ss.cancel();ssu.voice=ss.getVoices()[11];ssu.lang='ja-JP';ssu.text=w.getSelection().toString();ss.speak(ssu);}(window,new SpeechSynthesisUtterance(),speechSynthesis));

特に複雑なロジックを作るわけでもなく、数行で読み上げが実施できることが確認できます（SpeechSynthesisUtteranceがブラウザに実装されていることが前提）。

まとめ

以上2つのインターフェースの使い方になりますが、もう少し具体的な用例としては、Google Maps APIを使用して入力した出発点・到着点を音声認識インターフェースで検索、返ってきた結果を音声合成インターフェースで出力したり、特定の言葉に反応する対話型インターフェース、音声のリアルタイム翻訳などが考えられます。今回は登録が必要なAPIを加えた記述はしていませんが、これらのAPIを用いる実装に関しても、上記の記述例を見る限りブラウザが対応していれば実装自体はそこまで難しくないことが分かります。認識・読み上げの精度や、JavaScript有効環境が必須であるなど、スクリーンリーダーの代替えとしては完全ではないなどの問題点を考慮する必要性はありますが、調理中にタブレットPCへ指示を行ったり、IoT方面など、音声の用途は適材適所ありますので、Webに音声を取り入れてみてはいかがでしょうか。

2016年の記事一覧に戻る