会話するウェブアプリ - Speech Synthesis API の概要

Web Speech API は、音声認識（音声文字変換）と音声合成（テキスト読み上げ）を JavaScript に追加します。この投稿では、最近 Chrome 33（モバイルとパソコン）に導入された後者について簡単に説明します。音声認識にご興味をお持ちの場合は、Glen Shires が以前に執筆した音声認識機能に関する優れた記事「音声駆動型ウェブアプリ: ウェブ音声 API の概要」をご覧ください。

基本

synthesis API の最も基本的な使用方法は、speechSynthesis.speak() と音声を渡すことです。

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

また、パラメータを変更して、音量、読み上げ速度、ピッチ、音声、言語を変更することもできます。

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

音声の設定

API を使用すると、エンジンがサポートする音声のリストを取得することもできます。

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

次に、発話オブジェクトに .voice を設定して、別の音声を設定します。

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

デモ

Google I/O 2013 の「More Awesome Web: features you've always wanted」（www.moreawesomeweb.com）という講演では、Google Now や Siri のようなデモを行いました。Web Speech API の SpeechRecognition サービスと Google Translate API を使用して、マイク入力を別の言語に自動翻訳するデモです。

デモ: http://www.moreawesomeweb.com/demos/speech_translate.html

残念ながら、このアプリでは、ドキュメントに記載されていない（非公式の API）を使用して音声合成を行っていました。これで、翻訳を音声で読み上げる完全な Web Speech API が完成しました。合成 API を使用するようにデモを更新しました。

対応ブラウザ

Chrome 33 では Web Speech API が完全にサポートされていますが、iOS7 版 Safari では部分的にサポートされています。

特徴検出

ブラウザによって Web Speech API の各部分が個別にサポートされている場合があるため（Chromium の場合など）、各機能を個別に検出することをおすすめします。

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}