SpeechSynthesis.js
// 変数の設定
const txtSpeech = document.querySelector('#readme')
const speakBtn = document.querySelector('#speak-btn')
const cancelBtn = document.querySelector('#cancel-btn')
const pauseBtn = document.querySelector('#pause-btn')
const resumeBtn = document.querySelector('#resume-btn')
// ピッチとレートの値の更新
const pitch = document.querySelector("#pitch")
const rate = document.querySelector("#rate")
const pitchValue = document.querySelector(".pitch-value")
const rateValue = document.querySelector(".rate-value")
pitchValue.textContent = pitch.value
rateValue.textContent = rate.value
pitch.onchange = function () {
pitchValue.textContent = pitch.value
};
rate.onchange = function () {
rateValue.textContent = rate.value
};
// テキストの発話
speakBtn.addEventListener('click', function () {
const uttr = new SpeechSynthesisUtterance(txtSpeech.innerText)
uttr.voice = speechSynthesis
.getVoices()
.filter(voice => voice.name === voiceSelect.value)[0]
uttr.pitch = pitch.value
uttr.rate = rate.value
speechSynthesis.speak(uttr)
})
// 発話の停止・一時停止・再開
cancelBtn.addEventListener('click', function () {
speechSynthesis.cancel()
})
pauseBtn.addEventListener('click', function () {
speechSynthesis.pause()
})
resumeBtn.addEventListener('click', function () {
speechSynthesis.resume()
})