JavaScript 代码：

// 初始化 speechSynthesis API

const synth = window.speechSynthesis

// 获取 DOM 节点

const body = document.querySelector('body')

const textForm = document.querySelector('form')

const textInput = document.querySelector('#text-input')

const voiceSelect = document.querySelector('#voice-select')

const rate = document.querySelector('#rate')

const rateValue = document.querySelector('#rate-value')

const pitch = document.querySelector('#pitch')

const pitchValue = document.querySelector('#pitch-value')

let voices = []

function getVoiceList() {

voices = synth.getVoices()

// 循环 voices 数组，并逐一创建一个 option

voices.forEach((voice) => {

const option = document.createElement('option')

option.textContent = voice.name

// 设置 option 属性

option.setAttribute('data-lang', voice.lang)

option.setAttribute('data-name', voice.name)

voiceSelect.appendChild(option)

})

}

// synth.getVoices() 为异步执行

// synth.getVoices() 方法将在 synth.onvoiceschanged 触发时运行

// 因此须有如下语句，否则 synth.getVoices() 返回空数组

getVoiceList()

if (synth.onvoiceschanged !== undefined) {

synth.onvoiceschanged = getVoiceList

}

// 发音方法

function speakIt() {

// 若正在发音则直接返回

if (synth.speaking) {

return

}

if (textInput.value != '') {

// 添加 gif 动画

body.style.background = '#141414 url(./img/wave.gif) repeat'

body.style.backgroundPositionY = '-50px'

// 获取发音文本

const speakText = new SpeechSynthesisUtterance(textInput.value)

// 发音结束后触发的方法

speakText.onend = (e) => {

body.style.background = '#141414'

}

// 发音出错是触发的方法

speakText.onerror = (e) => {

alert('出现错误，请重试。')

}

// 获取 select 框当前选中的语言项并获取其 data-name 属性值

const selectVoice = voiceSelect.selectedOptions[0].getAttribute('data-name')

// 遍历 voices 数组，在 voice.name 中找到与上方 select 中选择的语言一致的选项

// 并把它赋值给 speakText.voice

voices.forEach((voice) => {

if (voice.name === selectVoice) {

speakText.voice = voice

}

})

// 设置发音速率

speakText.rate = rate.value

// 设置发音音调

speakText.pitch = pitch.value

// 开始发音

synth.speak(speakText)

}

}

// 提交表单

textForm.addEventListener('submit', (e) => {

e.preventDefault()

speakIt()

})

// 改变速率右侧的数值

rate.addEventListener('change', (e) => {

rateValue.textContent = rate.value

})

// 改变音调右侧的数值

pitch.addEventListener('change', (e) => {

pitchValue.textContent = pitch.value

})