1. kyota

    No comment

    kyota
Changes in body
Source | HTML | Preview
@@ -1,135 +1,138 @@
最近、音声合成にちょっと興味を持ち、サンプルを作ってみた。
内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。
日本語は、オプションをほとんどサポートしていないのが残念だが、今後に期待。
英語だと、`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();
- // unsupported.
- if (!'SpeechSynthesisUtterance' in window) {
- alert('Speech synthesis(音声合成) APIには未対応です.');
- return;
- }
- // 発話機能をインスタンス化
- var msg = new SpeechSynthesisUtterance();
- var voices = window.speechSynthesis.getVoices();
+ $('#btn').on('click',function() {
+
// 以下オプション設定(日本語は効かないもよう。。)
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-JP'; // en-US or ja-JP
// msg.lang = 'en-US'; // en-US or ja-JP
// 発話実行
speechSynthesis.speak(msg);
// 終了時の処理
msg.onend = function (event) {
- console.log('喋った時間:' + event.elapsedTime + 's');
+ 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)
# (おまけ)Google翻訳APIを勝手に使う方法
こちらはブラウザ側ではなく、Google翻訳側にリクエストするやり方。
非公式なので、いずれできなくなる可能性あり。
ブラウザ側と違い、若干遅くて訛りがあるようなしゃべり方になる。
## HTML
```html
<textarea id="utterance"></textarea><br>
<button id="tts_button">しゃべらせる</button><br>
<div id="audio_div"></div><br>
<div id="url"></div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" charset="utf-8"></script>
```
## JavaScript
```js
$(function() {
$('#tts_button').click(tts);
function tts() {
var lang = 'ja';
var tts_url = 'http://translate.google.com/translate_tts?tl=' + lang + '&q=';
var tts_utterance = $('#utterance')[0].value;
console.log('utterance:' + tts_utterance);
tts_utterance = encodeURIComponent(tts_utterance);
tts_url += tts_utterance;
console.log('tts_url:' + tts_url);
var inner_html = '<iframe src="' + tts_url + '" style="display:none;"></iframe>';
console.log('html:' + inner_html);
$('#audio_div')[0].innerHTML = inner_html;
var href_url = 'URL:<a href="' + tts_url + '">' + tts_url + '</a>';
$('#url')[0].innerHTML = href_url;
}
});
```