Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

内容は、テキストボックスに入力した内容を、ブラウザに喋ってもらうというもの。
日本語は、オプションをほとんどサポートしていないのが残念だが、今後に期待。
英語だと、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;
}

});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした