HTML5講座2回 - K3 計算技術研究会

第２回では
HTML5でTTS（Text To Speech）をやってみたいと思います。
Text To Speechとはテキストを音声合成で読みあげる機能のことです。
ゆっくりボイスで有名なSofTalkやJulius APIとかが有名です。
HTML5ではWeb Speech APIというものを使うことで
ブラウザ機能で読み上げることができるようになりました

今回使う全ソースコードは次からダウンロードできます。
tts.html

speakボタンでローマ字入力した日本語をしゃべります。

全ソースコードは以下となります

<!DOCTYPE html>
<!-- saved from url=(0065)http://html5-examples.craic.com/google_chrome_text_to_speech.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Web speech API によるText to Speech</title>
 <script type="text/javascript">

    var voices = [];

    window.onload=function() {
       voices = window.speechSynthesis.getVoices();
       for(var i = 0; i < voices.length; i++ ) {
           console.log("Voice " + i.toString() + ' ' + voices[i].name);
       }     
   };
      
   function speak() {
       var u = new SpeechSynthesisUtterance();
       u.lang = 'ja-JP';
       u.text = document.getElementById('text').value; // しゃべる内容、日本語はローマ字で入力
//          u.pitch = 1;
//          u.rate = 1;
//          u.volume = 1;
       speechSynthesis.speak(u);
   }
 </script>

</head>
<body>
 
 <h2>Text to Speech</h2>

 <input type="text" id="text" value="konnnichiwa"/><br/>
 <input type="button" id="tts" value="Speak" onClick="speak()"/>

</body>
</html>

注意点はローマ字入力でないと日本語がしゃべれないということです。
後、いまんとこ声のバリエーションがありません。
ちゃんとした日本語しゃべらせたいよーという人は
日本語→ローマ字変換するYahooのWeb APIが用意されています
（１日のリクエスト回数に上限はありますが）
http://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html
興味がある人はチャレンジしてみてください。

添付ファイル:

tts.png 422件 [詳細]

tts.html 567件 [詳細]

Last-modified: 2014-05-04 (日) 14:22:13