HTML5講座2回の変更点

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

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

speakボタンでローマ字入力した日本語をしゃべります。
&ref(tts.png);

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

 <!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が用意されています（１日のリクエスト回数に上限はありますが）
日本語→ローマ字変換するYahooのWeb APIが用意されています
（１日のリクエスト回数に上限はありますが）
http://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html
興味がある人はチャレンジしてみてください。

#vote(○[0],△[0],×[0])
HTML5講座2回 の変更点
