GTSPORTで90度超えドリフトをする方法
ニコニコ生放送で視聴者が打ち込んだコメントを次々に読み上げていく「棒読みちゃん」というソフトがありますが、遂にこれをJavaScriptで簡単に実装できるようになりました。英語、日本語、フランス語など対応言語は様々です。
セットした文字列を読み上げてくれる「Speech Synthesis API」
セットした文字列を読み上げよう
以下のサンプルは、セットした文字列を英語(米：女性)で読み上げます。
セットした文字列を読み上げる
読み上げる
document.getElementsByTagName('button')[0].addEventListener('click', function(){
speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));
});
speechSynthesis.speakメソッドを使うことで読み上げを可能にします。そしてnew SpeechSynthesisUtteranceで読み上げ用のオブジェクトを作成し、その中に文字列をセットすれば完成です。
再生、一時停止、再開
以下のサンプルは、音声の再生、一時停止、再開ボタンを実装しています。
再生、一時停止、再開ボタン
読み上げる
一時停止
再開
停止
var speech = new SpeechSynthesisUtterance('All your dreams can come true if you have the courage to pursue them.');
document.getElementsByTagName('button')[0].addEventListener('click', function(){
speechSynthesis.speak(speech);
});
document.getElementsByTagName('button')[1].addEventListener('click', function(){
speechSynthesis.pause(speech);
});
document.getElementsByTagName('button')[2].addEventListener('click', function(){
speechSynthesis.resume(speech);
});
document.getElementsByTagName('button')[3].addEventListener('click', function(){
speechSynthesis.cancel(speech);
});
音声の種類一覧を取得しよう
音声には地域や性別で区別された様々な種類が用意されています。以下のサンプルの「取得」を押すと一覧が表示されます。なお、MacとWindowsでは種類に違いがあります。
音声の種類一覧を取得する
取得
var speech = new SpeechSynthesisUtterance('Hello World');
speechSynthesis.speak(speech);
speechSynthesis.cancel(speech);
document.getElementsByTagName('button')[0].addEventListener('click', function(){
speechSynthesis.getVoices().forEach(function(voice){
var li = document.createElement('li');
li.innerText = voice.name;
document.getElementsByTagName('ul')[0].appendChild(li);
});
});
音声の種類一覧の取得方法は様々ですが、今回はgetVoices()をforEach()という見慣れないループで取得しています。挙動としては、まずgetVoices()が実行され音声種類の一覧が配列で返されます。そしてこの配列をforEachで回しているというだけの話です。
注意点としては、speechSynthesis.speak()で一度音声を読ませてからでないとうまく一覧を取得できないようです。今後の対応に注目です。
速度やピッチなどの設定をしよう
SpeechSynthesisUtteranceというオブジェクトに速度やピッチといった属性をセットすることができます。以下のサンプルはその全ての属性をセットしています。
オプションを設定しよう
読み上げる
document.getElementsByTagName('button')[0].addEventListener('click', function(){
var speech = new SpeechSynthesisUtterance();
speech.voiceURI = 'Google 日本人';
speech.text = 'こんばんは。今宵も月明かりが綺麗ですね。';
speech.lang = 'ja-JP';
speech.rate = 1.2;
speech.volume = 0.8;
speech.pitch = 1.5;
speechSynthesis.speak(speech);
});
これらの属性をSpeechSynthesisUtteranceオブジェクトを格納した変数に繋げてあげれば適用されます。サンプルのJSタブを開いて具体的なプログラムを確認してください。
いろんな言語を聴いてみよう！
対応している言語での読み上げを以下のサンプルに載せています。
世界の「ありがとう」
ドイツ語Danke
イギリス英語Thank you
アメリカ英語Thank you
スペイン語Gracias
フランス語Merci
イタリア語Grazie
日本語ありがとう
韓国語고마워요
中国語谢谢
function speech (lang,vocab){
var speech = new SpeechSynthesisUtterance();
speech.text = vocab;
speech.lang = lang;
speechSynthesis.speak(speech);
}
HTMLに各言語コードと文字列を埋め込んでいます。そして各ボタンがクリックされたら、JSに送って読み上げを実行しています。
読み上げイベントを設定しよう
読み上げが開始されたり完了したりしたときに発火させることが出来るイベントが用意されています。以下のサンプルは、読み上げ開始時と完了時のイベントを設定しています。
読み上げ音声のイベント
読み上げる
var speech = new SpeechSynthesisUtterance('All your dreams can come true if you have the courage to pursue them.');
var button = document.getElementsByTagName('button')[0];
document.getElementsByTagName('button')[0].addEventListener('click', function(){
speechSynthesis.speak(speech);
});
speech.addEventListener('start', function(){
var p = document.createElement('p');
p.innerText = '読み上げが開始されました...';
document.body.insertBefore(p, button);
});
speech.addEventListener('end', function(){
var p = document.createElement('p');
p.innerText = '全ての文字列を読み上げました...';
document.body.insertBefore(p, button);
});
各イベントはaddEventListenerによって発火するようにしました。startとendイベントは正常に動作しましたが、pause、resume、boundaryイベントについては正常動作の確認がとれませんでした。mark、errorイベントについては調べていません。
参考
- 次々と増えるmeta,linkタグの種類と役割について整理しよう！
- デバイスの詳細なタッチ情報を取得できる「Touch Events Extensions」
- サイトアイコンをスマホのHome画面に表示させる「apple-touch-icon」
- IE11でHTML5デザインが崩れる現象を対策する「x-ua-compatible」
- videoタグに使えるイベントハンドラのまとめ
- videoタグのあらゆる動画情報をJavaScriptで取得する方法
- ユーザーのコピペ、カットを自由に操作できる「Clipboard API」
- デバイスの位置情報を取得できる「Geolocation API」
執筆者
AnTytle