音声合成【Web Speech API】ブラウザに喋らせたいけど喋らない…よくある3つのトラブルとその対処法
この記事を書いた人
上間 英紀
先日、自社のライブ配信サイト・21LIVEで、投稿されたコメントを音声読み上げする機能を新しく追加しました。
そこで使ったのが、Web Speech APIです。
仕様がシンプルでわかりやすく、ブラウザに喋らせたい時にはオススメのAPIです。
テキストを音声合成すること自体は、コードを使えば簡単でした。
しかし、どんなテキストでも正確な音声にしてくれるわけではなく、「それは違う！」と困ったことも…。
つまずきながらもコーディングは無事に完了しましたが、今回のトラブルは音声合成ではあるあるだと思います。
そこで今回は、ブラウザに喋らせるためのWeb Speech APIの基本的な使い方と、音声読み上げでありがちな3つのトラブルと対処法を紹介します。
目次
Web Speech APIで音声合成を試してみる
Web Speech APIはブラウザ上で音声データを扱えるようにするAPIで、登録などはなく、利用料などの発生もなく利用できました。
Web Speech APIには2つの構成があります。
| 種類 | 音声認識(入力) | 音声合成(出力) |
|---|---|---|
| SpeechRecognition | SpeechSynthesis | |
| できること | 音声入力されたデータを認識 | 入力されたテキストを音声に置換 |
| 使用例 | 音声検索 | 音声読み上げ |
基本コード
let hoge = new SpeechSynthesisUtterance('しゃべらせたいテキスト');
window.speechSynthesis.speak(hoge);
</script>
この2行のJavaScriptのコードを使えば、ブラウザが喋るようになります。
文字だけでなく一般的なスマホの絵文字も、ある程度は読み上げ可能でした。
今回は、フォームに入力された文字列を取得して変数に格納 → 格納された文字列を音声合成する という対応を行いました。
<button class="get_text">読み上げ</button>
<script>
$('.get_text').on('click', function(){
let textVal = $('.text').val();
let speech = new SpeechSynthesisUtterance(textVal);
window.speechSynthesis.speak(speech);
});
</script>
対応ブラウザ
Web Speech APIは、一般的なブラウザであればPCもスマホも対応しているようです。
- ・Chrome
- ・Edge
- ・Firefox
- ・Safari
▶Web Speech APIの
対応ブラウザの詳細はこちら
プロパティ
プロパティも用意されているので、音声読み上げの速度や音声の高低といったより詳細な設定も簡単にできました。
- 【言語設定】
-
SpeechSynthesisUtterance.lang
(例)SpeechSynthesisUtterance.lang = 'ja-JP';
- 【ピッチ】
-
SpeechSynthesisUtterance.pitch
(例)SpeechSynthesisUtterance.pitch = '1.0';
- 【音量】
-
SpeechSynthesisUtterance.volume
(例)SpeechSynthesisUtterance.volume = '1.0';
※日本語対応していないものもあるようです。
▶プロパティ詳細はこちら
ブラウザがうまく喋らない…困った時の対処法
いくらAPIを使えば簡単に音声合成できるといっても、イメージ通りに喋ってくれないこともあります。
- 1.漢字を正しく読まない
- 2.記号を読まない
- 3.画面に触れないと読まない
音声読み上げ機能を設置するにあたって、この「読まない」トラブルはあるあるではないでしょうか。
「やっぱりね」と思うことや、間違って合成された音声を聞いて笑っちゃうこともありましたが…。
ユーザーに笑って見逃してもらうわけにはいかないので、しっかり対処しておかなくてはいけません。
漢字の読み方を間違える
漢字には音読み訓読みがあり単語によって読み方が変わりますが、すべての漢字・単語を正確に合成するのは難しいようです。
例えば、「鬼ヶ島（おにがしま）」を「おにけしま」と読んでしまったりするわけです。
「これは仕方ないな…」というのが人名。
いわゆるキラキラネームのように一般的な読みですらない場合には、100％に近い確率で違う読まれ方をされます。
対処方としては
・あらかじめ読み仮名を設置しておく
・ほかの音声合成ツールを使う
この2つくらい。
よく使う単語がある場合には、事前の読み仮名設定である程度カバーできるかもしれませんが、すべてを網羅するのは現実的ではありません。
なので、APIで100％正確に読ませるというのは厳しい…というのが正直なところです。
読まない記号もある
- 【読まない記号例】
- ☆、★、♪、・、○、●、△、▲、□、■、◇、◆
- 【一応読むけど全然違う例】
-
ｗｗｗ → ダブルダブルダブル
(・ω・) → かっこ おめが
★や♪といったシンプルで一般的な記号でも読み上げられなかったのは、ちょっと意外でした。
それでいて、いくつかの記号を使った顔文字は「かっこ おめが」、笑いを表現したwwwはそのまま「ダブルダブルダブル」と読み上げられてしまいました。
顔文字やネットスラングを音で再現するのは、たしかに難しいことではありますが…。
- ☝顔文字を読ませることは可能
-
よく使われそうな顔文字は、あらかじめ文字列に置換しておくことで対応！
今回はあらかじめ用意した顔文字だったので、if文を使い条件と合致する顔文字が送信された場合に代替の文字列を読み上げるという処理を追加しました。
（例）
(´・ω・｀) → しょぼーん
▼使用したコード例
if ( messageVal == '（´・ω・｀）' ) { //入力された文字が「(´・ω・｀)」だったら
new SpeechSynthesisUtterance('しょぼーん');//「しょぼーん」と読み上げる
} else if ( messageVal == '(´；ω；｀)' ) {//入力された文字が「(´；ω；｀)」だったら
new SpeechSynthesisUtterance('ぶわっ');//「ぶわっ」と読み上げる
}else if ( messageVal == ～～移行繰り返し
- 【注意！】
- ・半角全角など、ひとつでも違いがあると読まない
- ・漢字は音読み訓読みがあるので、ひらがなで置換するのが無難
画面に触れないと読み上げない(iOSの場合)
- 【なぜ読まない？】
- iOS Safariの自動再生ポリシーで、ユーザーが再生ボタンを押すなど「再生を許可する動作」を行わない限り自動再生しない（音声が流れない）という制限があるから。
- 【どうすればいい？】
- 音声読み上げやvideoタグの自動再生など、音声を流すにはユーザーによる動作が必要。 今回は、音声読み上げのON／OFFスイッチを設置することでこの問題を回避しました。
- ☝iOSでも自動読み上げさせる方法
-
音声読み上げのON／OFFスイッチを設置！
ユーザーに画面を触れさせることができますし、音声読み上げをさせるかはユーザーが選べるという利便性にも繋がります。
▼使用したコード例
【HTML】
【JavaScript】
let speakCommentFlg = 0;
// 音声読み上げスイッチ
function speakSwitch() {
let speakMsg = new SpeechSynthesisUtterance('コメント読み上げをオンにしました。');
speakMsg.lang = 'ja-JP';
speakMsg.rate = 1.0;
if ( speakCommentFlg == 1 ) {
speakCommentFlg = 0;
speakMsg.text = 'コメント読み上げをオフにしました。';
window.speechSynthesis.speak(speakMsg);
return;
}
speakCommentFlg = 1;
speakMsg.text = 'コメント読み上げをオンにしました。';
window.speechSynthesis.speak(speakMsg);
}
- 【ここに注意！】
-
現状がonなのかoffなのか、分かりやすいUIにする！
「今、オンになってる？オフになってる？」という疑問・不安が生じないよう、パッと見のわかりやすさを表現するのも大事なポイントです。
Web Speech APIを使ってみて…工夫次第で精度は上げられる！
今回、初めてWeb Speech APIを使用してみて、シンプルでわかりやすく機能の導入がスムーズに進められたというのが大きなメリットでした。
その反面、音声合成に正確性を求めるには限界があるという発見も…。
顔文字を判別したり漢字の読みの精度を高めたりしたい場合には、機械学習などの技術や他のツールと組み合わせが必要だとわかりました。
API ＝ 使いやすさ ＞ 正確さ
正確さを優先するミッションの場合には、API以外のツールも検討した方がいいのかもしれません。
Web Speech API単体で利用するのではなく、目的に合わせていろいろと工夫しなければいけないなと感じました。
少し困ったことはありましたが…。これまで音声を扱ったことがなかった僕にとっては、使いやすかったのはもちろん、「こんなことができるんだ～」という楽しさもあり、APIはとても魅力的な機能でした！
M&TTでは、「わくわく」を実現する仲間を募集しています！
皆様のご応募お待ちしております！