Webサイト（javascript）でテキストを音声で再生したいと思い方法を調べていたら、最近はブラウザが標準でテキスト読み上げるWeb Speech APIが用意されていたため、使い方を紹介したいと思います。

Web Speech APIについて

Web Speech APIはWebアプリが音声データを扱えるようにするAPIで、2012年にW3Cで策定されていたらしいですが、最近になってブラウザに実装され始めたようです。

マイクなどの音声を認識するSpeechRecognitionと、音声を合成するSpeechSynthesisの２つのインターフェースが用意されています。

今回はテキストを音声にしたかったのでSpeechSynthesisを使ってみました。

テキストを読み上げる簡単なコード

使い方は簡単で、以下の３行で再生できます。

var speak = new SpeechSynthesisUtterance();
speak.text = "サンプル";
speechSynthesis.speak(speak);

SpeechSynthesisUtteranceは読み上げるコンテンツと、その読み上げ方についての情報 (言語、音の高低、音量) になります。ここでは最低限の読み上げるテキストのみ設定しています。

これをspeechSynthesis.speak関数に渡すと読み上げてくれます。

音程や音量を変えてみる

SpeechSynthesisUtteranceの設定で、音声や音量を変えることができます。

var speak = new SpeechSynthesisUtterance();
speak.text = "サンプル"; //読み上げるテキスト
speak.lang = 'en-US'; //言語
speak.rate = 1.0; //読み上げの速さ(0-10)
speak.pitch = 1.0; //音の高低(0-2)
speak.volume = 1.0; //音量(0-1)
speak.voice = "Google UK English Male"; //音質（性別や●●風など）
speechSynthesis.speak(this.speak);

音質（男性や女性など）を設定するvoiceだけは特殊で、ブラウザによって設定できる内容が変わります。以下のコードでブラウザのvoice一覧を確認できます。

speechSynthesis.getVoices().find(function(voice){console.log(voice.name)});

edgeの場合は以下の４つでした。

Microsoft Ayumi - Japanese (Japan)
Microsoft Haruka - Japanese (Japan)
Microsoft Ichiro - Japanese (Japan)
Microsoft Sayaka - Japanese (Japan)