【プログラミング】音声合成を自分で書いてみる【JavaScript】

こんにちは、ともろう(@tomorrowSLog)です。

Web Speech API とJavaScriptを使って音声合成を実装してみたので備忘録として残しておきます。

2019.04.08【プログラミング】音声合成を自分で書いてみる【JavaScript】

2019.04.08【プログラミング】リアルタイム音声文字起こし【JavaScript】

音声文字起こし

開発言語

Javascript(メイン)
HTML/CSS(必要に応じて)

開発環境

Macbook Pro
Chrome

デモンストレーション

注意

PC版Chrome最新版において動作確認をしています

デモサイト

コード全文

<!--index.html-->
<h1>合成音声</h1>
<p>合成音声を作りたい内容を書いて、再生ボタンを押してください</p>
<p>音の速さも調整できます</p>
<textarea id="text" placeholder="再生する内容" ></textarea>
<button id="speak-btn">再生</button>
<p>Speed: <input type="range" id="slider" value="10" min="5" max="30"> ×<span id="label">1.0</span></p>

<script type="text/javascript">
  if ('speechSynthesis' in window) {
  } else {
    alert("このブラウザは音声合成に対応していません。")
  }

  var slider =document.getElementById('slider');
  var label =document.getElementById('label');
  slider.addEventListener('change', function(){
    var n;
    n = this.value * 0.1;
    label.innerHTML = n.toFixed(1);
  });

  const text     = document.querySelector('#text');
  const speakBtn = document.querySelector('#speak-btn');
  speakBtn.addEventListener('click', function() {
    const u = new SpeechSynthesisUtterance();
    u.text = text.value;
    u.rate = label.innerHTML;
    u.pitch = 1.2;
    speechSynthesis.speak(u)
  })

</script>

<p>合成音声を作りたい内容を書いて、再生ボタンを押してください</p>

<p>音の速さも調整できます</p>

<p>Speed: <input type="range" id="slider" value="10" min="5" max="30"> ×<span id="label">1.0</span></p>

if ('speechSynthesis' in window) {

} else {

alert("このブラウザは音声合成に対応していません。")

}

var slider =document.getElementById('slider');

var label =document.getElementById('label');

slider.addEventListener('change', function(){

var n;

n = this.value * 0.1;

label.innerHTML = n.toFixed(1);

});

const text = document.querySelector('#text');

const speakBtn = document.querySelector('#speak-btn');

speakBtn.addEventListener('click', function() {

const u = new SpeechSynthesisUtterance();

u.text = text.value;

u.rate = label.innerHTML;

u.pitch = 1.2;

speechSynthesis.speak(u)

})

</script>

学び

合成音声のスピードをスライドで調整できるようにしてみた。

スライダーの小数点出すのこんな感じでいいのかな?(動くからまあいいや)

参考サイト

参考 Web Speech APIw3c.github.io 参考 Webページでブラウザの音声合成機能を使おう - Web Speech API Speech Synthesisqiita.com