1. kyota

    Posted

    kyota
Changes in title
+Web Speech Synthesis API(音声合成API)で遊んでみた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,59 @@
+最近、音声合成にちょっと興味を持ち、サンプルを作ってみた。
+
+内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。
+日本語は、オプションがほとんどサポートしていないのが、残念だが、今後に期待。
+英語だと、`voices`の数値を変更して、声質変更や歌を歌ってもらうなど可能。
+
+僕がやりたのは、スマホで喋った内容を解析して、ブラウザ喋ってくれるようなロボットを作ってみたい。
+
+## HTML
+```html
+<div>
+ <input id="txt" type="text" value="こんにちは、私はドラえもんです">
+</div>
+<div>
+ <input id="btn" type="button" value="speech">
+</div>
+<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.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)