- 追加された行はこの色です。
- 削除された行はこの色です。
第2回では
HTML5でTTS(Text To Speech)をやってみたいと思います。
Text To Speechとはテキストを音声合成で読みあげる機能のことです。
ゆっくりボイスで有名なSoftTalkやJuliusとかが有名です。
最近ではHTML5のブラウザ機能で読み上げることができるようになりました
ゆっくりボイスで有名な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が用意されています
(1日のリクエスト回数に上限はありますが)
http://developer.yahoo.co.jp/webapi/jlp/furigana/v1/furigana.html
興味がある人はチャレンジしてみてください。
#vote(○[0],△[0],×[0])