こんにちは、ともろう(@tomorrowSLog)です。
Web Speech API とJavaScriptを使って音声合成を実装してみたので備忘録として残しておきます。


音声文字起こし
開発言語
- Javascript(メイン)
- HTML/CSS(必要に応じて)
開発環境
- Macbook Pro
- Chrome
デモンストレーション
注意
PC版Chrome最新版において動作確認をしていますコード全文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!--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> |
学び
合成音声のスピードをスライドで調整できるようにしてみた。
スライダーの小数点出すのこんな感じでいいのかな?(動くからまあいいや)
コメントを残す