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

• JavaScriptでMacに歌ってもらうAdd Star
• Web apps that talk - Introduction to the Speech Synthesis API
• Web Speech API で使える音声一覧。

（おまけ）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;
}

});