speechSynthesis.getVoices()で配列が返ってくるらしいので、
var text = "hello";
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.voice = "Alex";
speechSynthesis.speak(msg);
というコードを書いてみましたがmsg.voice = "Alexがうまくいかずエラーが出る。
いろいろ試してみると、speechSynthesis.onvoiceschanged で解決したので、備忘録として短いコードを書き残しておこう。
（ブラウザによるのかも ちなみに手元のブラウザはChrome）
デモ
以下のボタンをクリックすると Alex の声で hello と言ってくれる。
これをGoogle Apps ScriptのWebアプリで実現するコードを以下に残しました。
コード.gsfunction doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<body>
<button id="bt">Say hello</button>
<script>
speechSynthesis.onvoiceschanged = getVoices;
document.getElementById('bt').onclick = speak;
var voices;
function getVoices() {
voices = speechSynthesis.getVoices();
}
function speak() {
var text = "hello";
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.voice = voices[1];//Alex
speechSynthesis.speak(msg);
}
</script>
</body>
</html>
|
補足：失敗したコード
以下のようにindex.htmlを書くと、こんなエラーが出た
index.html
<!DOCTYPE html>
<html>
<body>
<button id="bt">Say hello</button>
<script>
document.getElementById('bt').onclick = speak;
function speak() {
var text = "hello";
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.voice = "Alex";
speechSynthesis.speak(msg);
}
</script>
</body>
</html>
|
speechSynthesis.onvoiceschanged = getVoices;
を実行しないとだめらしい。
参考
SpeechSynthesis.onvoiceschanged
SpeechSynthesis.onvoiceschanged
SpeechSynthesis.getVoices()
