Web Speech APIで実際にしゃべる環境を調べてみた #JavaScript

Web Speech APIを使うとJavaScriptだけでしゃべらせることができる。おぉ凄い！今時はそんな事もできるようになったのか！とワクワクしたもののの、いざ試してみるとしゃべってくれたり、くれなかったり…どうも全ての環境でしゃべってくれる訳ではなさそうです。

というわけでどの環境ならしゃべってくれるのか調べてみました。

どうやったらしゃべるの？

以下のようなコードでしゃべらせることができます。

var u = new SpeechSynthesisUtterance();
u.text = "こんにちは";
u.lang = 'ja-JP';
u.rate = 1.0;
speechSynthesis.speak(u);

テストコード

簡単ではありますが以下のようなコードを書いてみました。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Speech Test</title>
</head>
<body>
<input type="button" id="enUS" value="Hello">
<input type="button" id="jaJP" value="こんにちは">
</body>
<script type="text/javascript">
document.getElementById("enUS").addEventListener("click", function(e) {
    if (typeof SpeechSynthesisUtterance == "undefined") {return}
    var u = new SpeechSynthesisUtterance();
    u.text = "hello";
    u.lang = 'en-US';
    u.rate = 1.0;
    window.speechSynthesis.speak(u);
});
document.getElementById("jaJP").addEventListener("click", function(e) {
    if (typeof SpeechSynthesisUtterance == "undefined") {return}
    var u = new SpeechSynthesisUtterance();
    u.text = "こんにちは";
    u.lang = 'ja-JP';
    u.rate = 1.0;
    window.speechSynthesis.speak(u);
})
</script>
</html>

書いたコードからちょい変更したものをgithubに登録して、 https://hachisukansw.github.io/speech-test/ で試すことができるようにしてみました。

結果

ブラウザは最新のものとします（2017/3/15現在）。

OS等	ブラウザ	en-US	ja-JP	メモ
Ubuntu12-16	Chrome	○	○
	Firefox	×	×
Win10(14393)	Chrome	○	○
	Firefox	○	○
	Edge	×	○
Win7	Chrome	○	○
	Firefox	○	×
Android5-6	Chrome	○	○
Mac OS X(10.11.6)	Chrome	○	○	3/15追加
	Safari	○	○	3/15追加
iOS10.2(iPad)	Chrome	○	○	マナーモード不可、3/15変更
	Firefox	○	○	マナーモード不可、3/15変更
	Safari	○	○	マナーモード不可、3/15変更

手元にAndroidとMacがないこともあり思ったよりも試すことができる環境がなくてすみません。iOSはレンダリングエンジンが全て共通らしいのでひとつ試せば全て同じ結果になるようです。それを除けば、今のところ安定して使えそうなのはGoogle Chromeというところでしょうか。

Web Speech API のテストプログラムは以下のURLで公開しています。
https://hachisukansw.github.io/speech-test/

（追記）
3/15 Mac OS Xの情報を頂いたので追加しました。
3/15 iPadでマナーモードになっていたため解除したところしゃべることが確認できました。私の環境ではマナーモードでもGoogle ChromeでYoutubeの音声が再生されるため関係ないと思っていたのですがWeb Speech APIの方は関係するようです。

Web Speech APIで実際にしゃべる環境を調べてみた

どうやったらしゃべるの？

テストコード

結果

関連リンク