Edited at

Web Speech Synthesis API(音声合成API)で遊んでみた

最近、音声合成にちょっと興味を持ち、サンプルを作ってみた。

内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。

日本語は、オプションをほとんどサポートしていないのが残念だが、今後に期待。

英語だと、voicesの数値を変更して、声質変更や歌を歌ってもらうなど可能。

いずれ、スマホで喋った内容を解析して、ブラウザ喋ってくれるようなロボットを作ってみたい。


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

$(function() {

// 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');
}

});
});


上記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


(おまけ)Google翻訳APIを勝手に使う方法

こちらはブラウザ側ではなく、Google翻訳側にリクエストするやり方。

非公式なので、いずれできなくなる可能性あり。

ブラウザ側と違い、若干遅くて訛りがあるようなしゃべり方になる。


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

$(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;
}

});