Speech Synthesis API とは何ぞ？
指定テキストを音声再生させることができるよ！
JavaScriptでブラウザがあれば実行できるよ！
※対応しているブラウザ一覧はこちらを参照。
使ってみる
| ブラウザ | OS |
|---|---|
| Vivaldi | macOS Sierra |
とりあえずF12で開発者ツールを開いて以下を入力する。
var text = "うんこはお尻から出てくるらしいよ！";
var ss = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(ss);
たったこれだけで合成音声が使える。
世の中便利になったもんだなぁ。
まず、この2つを抑えておけば大丈夫そう。
・SpeechSynthesisUtterance
・speechSynthesis
SpeechSynthesisUtterance
速度やピッチ、言語などの属性を設定できる。
設定出来る属性一覧。
| 属性 | 説明 |
|---|---|
| text | 読み上げる文字列をセット |
| lang | 言語をセット |
| voiceURI | 声の種類をセット |
| volume | 音量の調整 |
| rate | 速さの調整 |
| pitch | ピッチの調整 |
具体的な属性値はこちらを参照。
speechSynthesis
受け取ったSpeechSynthesisUtteranceオブジェクトを元に音声を合成する。
渡されたオブジェクトはキューに追加され、キューがなくなるまで喋るらしい。
メソッドはこんな感じ。
| メソッド | 説明 |
|---|---|
| speak | キュー追加 |
| cancel | 全キュー削除 |
| pause | 一時停止 |
| resume | 再開 |
まとめ
イメージとしては、
speechSynthesisはCDプレイヤーで、
SpeechSynthesisUtteranceはCDって感じかな。
現実は、CDをプレイヤーにどんどん突っ込めないから良い子は真似しないでね！
var ss = new SpeechSynthesisUtterance();
ss.text = "先生は空中回転しながらうんちをした。";
ss.lang = "ja-JP";
ss.voiceURI = "Google 日本人";
ss.volume = 1;
ss.rate = 1;
ss.pitch = 1;
speechSynthesis.speak(ss);
JavaScriptでできるし、
AnnictのAPI使えば、今日の放送アニメ一覧読み上げてくれるモノもつくれるね！