1. kyota

    音声一覧追加

    kyota
Changes in body
Source | HTML | Preview
@@ -1,57 +1,95 @@
最近、音声合成にちょっと興味を持ち、サンプルを作ってみた。
内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。
日本語は、オプションをほとんどサポートしていないのが残念だが、今後に期待。
英語だと、`voices`の数値を変更して、声質変更や歌を歌ってもらうなど可能。
いずれ、スマホで喋った内容を解析して、ブラウザ喋ってくれるようなロボットを作ってみたい。
## HTML
```html
<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.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');
}
});
```
+## 上記`msg.voice`で使用できる音声一覧
+```
+ 0 Google US English en-US
+ 1 Google UK English Male en-GB
+ 2 Google UK English Female en-GB
+ 3 Google Español es-ES
+ 4 Google Français fr-FR
+ 5 Google Italiano it-IT
+ 6 Google Deutsch de-DE
+ 7 Google 日本人 ja-JP
+ 8 Google 한국의 ko-KR
+ 9 Google 中国的 zh-CN
+ 10 Alex en-US
+ 11 Agnes en-US
+ 12 Albert en-US
+ 13 Bad News en-US
+ 14 Bahh en-US
+ 15 Bells en-US
+ 16 Boing en-US
+ 17 Bruce en-US
+ 18 Bubbles en-US
+ 19 Cellos en-US
+ 20 Deranged en-US
+ 21 Fred en-US
+ 22 Good News en-US
+ 23 Hysterical en-US
+ 24 Junior en-US
+ 25 Kathy en-US
+ 26 Pipe Organ en-US
+ 27 Princess en-US
+ 28 Ralph en-US
+ 29 Trinoids en-US
+ 30 Vicki en-US
+ 31 Victoria en-US
+ 32 Whisper en-US
+ 33 Zarvox en-US
+```
+
## 参考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)