主要ブラウザの音声合成API(Speech Synthesis API)対応状況
JavaScript でテキストを読み上げることのできる音声合成API(Speech Synthesis API)は、主要ブラウザの中では Google Chrome で最初に利用可能になりました。その後、他のブラウザでも実装が進み、現在は次のような状況になっています。
Google Chrome
デフォルトで利用可能。Mozilla Firefox
about:config
でmedia.webspeech.synth.enabled
をtrue
に設定することで利用可能。Microsoft Edge
Windows 10 Anniversary Update で正式対応。現状では Windows 10 Insider Preview Build 14316 以降で利用可能。
<input id="speechText" type="text" value="Hello, world"> <input id="speechButton" type="button" value="開始"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script> $(document).ready(function() { $('#speechButton').on('click', function() { if (!window.speechSynthesis) { alert('Speech Synthesis API未対応です。'); return; } var speech = new SpeechSynthesisUtterance(); speech.text = $('#speechText').val(); speechSynthesis.speak(speech); }); }); </script>
SpeechSynthesisUtterance
のプロパティを設定することで音声をカスタマイズすることができます。
var speech = new SpeechSynthesisUtterance(); speech.text = $('#speechText').val(); speech.volume = 1.0; // 音量: 0.0~1.0 speech.rate = 1.0; // 速度: 0.1~10.0 speech.pitch = 1.0; // 音程: 0.0~2.0 speech.lang = 'ja-JP'; // 言語 var voices = window.speechSynthesis.getVoices(); speech.voice = voices[0]; // 音声: ブラウザによって種類が異なります。 speechSynthesis.speak(speech);
特に window.speechSynthesis.getVoices()
は特徴的で、現状ではブラウザによって言語や性別の異なる音声が用意されています。例えば Google Chrome 51 では英語(Google US English
)、ドイツ語(Google Deutsch
)、フランス語(Google français
)、日本語(Google 日本語
)などの20種類が用意がされているため、上記の例では voices[0]
から voices[19]
まで利用できますが、Microsoft Edge では2種類の女性の日本語音声(Microsoft Ayumi Mobile - Japanese (Japan)
、Microsoft Haruka Mobile - Japanese (Japan)
)と1種類の男性の日本語音声(Microsoft Ichiro Mobile - Japanese (Japan)
)なので上記の例では voices[0]
から voices[2]
まで利用できます。