1. kyota

    No comment

    kyota
Changes in body
Source | HTML | Preview
@@ -1,59 +1,57 @@
最近、音声合成にちょっと興味を持ち、サンプルを作ってみた。
内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。
日本語は、オプションをほとんどサポートしていないのが残念だが、今後に期待。
英語だと、`voices`の数値を変更して、声質変更や歌を歌ってもらうなど可能。
いずれ、スマホで喋った内容を解析して、ブラウザ喋ってくれるようなロボットを作ってみたい。
## HTML
```html
-<div>
- <input id="txt" type="text" value="こんにちは、私はドラえもんです">
-</div>
-<div>
- <input id="btn" type="button" value="speech">
-</div>
+<input id="txt" type="text" value="こんにちは、私はドラえもんです">
+<input id="btn" type="button" value="speech">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
```
## JavaScript
```js
$(function() {
$('#btn').on('click',function() {
// unsupported.
if (!'SpeechSynthesisUtterance' in window) {
alert('Speech synthesis(音声合成) APIには未対応です.');
return;
}
// 発話機能をインスタンス化
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
// 以下オプション設定(日本語は効かないもよう。。)
msg.voice = voices[7]; // 7:Google 日本人 ja-JP ※他は英語のみ
msg.volume = 1.0; // 音量 min 0 ~ max 1
msg.rate = 1.0; // 速度 min 0 ~ max 10
msg.pitch = 1.0; // 音程 min 0 ~ max 2
- msg.text = $('#txt').val(); // しゃべる内容
+
+ msg.text = $('#txt').val(); // る内容
msg.lang = 'ja-UP'; // en-US or ja-UP
// msg.lang = 'en-US'; // en-US or ja-UP
// 発話実行
speechSynthesis.speak(msg);
// 終了時の処理
msg.onend = function (event) {
console.log('喋った時間:' + event.elapsedTime + 's');
}
});
```
## 参考URL
- [JavaScriptでMacに歌ってもらうAdd Star](http://d.hatena.ne.jp/NeoCat/20140517/1400327630)
- [Web apps that talk - Introduction to the Speech Synthesis API](http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API)
- [Web Speech API で使える音声一覧。](http://tkmr.hatenablog.com/entry/2014/06/18/210715)