読者です 読者をやめる 読者になる 読者になる

主要ブラウザの音声合成API(Speech Synthesis API)対応状況

【スポンサーリンク】

JavaScript でテキストを読み上げることのできる音声合成API(Speech Synthesis API)は、主要ブラウザの中では Google Chrome で最初に利用可能になりました。その後、他のブラウザでも実装が進み、現在は次のような状況になっています。

次に示すのは音声合成APIの簡単な利用例です。

<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] まで利用できます。