セットした文字列を読み上げてくれる「Speech Synthesis API」

ニコニコ生放送で視聴者が打ち込んだコメントを次々に読み上げていく「棒読みちゃん」というソフトがありますが、遂にこれをJavaScriptで簡単に実装できるようになりました。英語、日本語、フランス語など対応言語は様々です。

セットした文字列を読み上げよう

以下のサンプルは、セットした文字列を英語(米:女性)で読み上げます。

セットした文字列を読み上げる


読み上げる

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イベントについては調べていません。

    参考

    執筆者

    AnTytle

    管理人です。YouTubeチャンネルもやっています!とにかくゲームが大好きです。

    オススメ