js文字转语音

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字转语音</title>
</head>

<body>
    <div class="voiceinator">
        <h1>文字转语音</h1>

        <select name="voice" id="voices">
            <option value="">Select A Voice</option>
        </select>

        <label for="rate">Rate:</label>
        <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

        <label for="pitch">Pitch:</label>
        <input name="pitch" type="range" min="0" max="2" step="0.1">

        <textarea name="text">我是可以说话的哦</textarea>

        <button id="stop">Stop!</button>
        <button id="speak">Speak</button>
    </div>

    <script>
        const synth = window.speechSynthesis
        const msg = new SpeechSynthesisUtterance()
        let voices = []
        const voicesDropdown = document.querySelector('[name="voice"]')
        const options = document.querySelectorAll('[type="range"], [name="text"]')
        const speakButton = document.querySelector('#speak')
        const stopButton = document.querySelector('#stop')

        msg.text = '我是可以说话的哦！'
        msg.lang = 'zh-CN'

        synth.addEventListener('voiceschanged', getSupportVoices)
        speakButton.addEventListener('click', throttle(handleSpeak, 1000))
        stopButton.addEventListener('click', handleStop)
        options.forEach(e => e.addEventListener('change', handleChange))

        function getSupportVoices() {
            voices = synth.getVoices()
            voices.forEach(e => {
                const option = document.createElement('option')
                option.value = e.lang
                option.text = e.name
                voicesDropdown.appendChild(option)
            })
        }

        function handleSpeak(e) {
            msg.lang = voicesDropdown.selectedOptions[0].value
            synth.speak(msg)
        }

        function handleStop(e) {
            synth.cancel(msg)
        }

        function handleChange(e) {
            msg[this.name] = this.value
        }

        function throttle(fn, delay) {
            let last = 0
            return function () {
                const now = new Date()
                if (now - last > delay) {
                    fn.apply(this, arguments)
                    last = now
                }
            }
        }
    </script>
</body>

</html>