账号  

密码  

<<返回列表下一个上一个收藏 打印本文 复制本文地址

417

查看

0

回复
主题:js文字转语音 [收藏主题]  
lan988 当前离线

288

主题

210

广播

31

粉丝
添加关注
级别:管理员
用户积分:182 分
登录次数:1101 次
注册时间:2007-3-30
最后登录:2024-11-27
lan988 发表于:2024-1-13 20:41:54   | 只看该作者 查看该作者主题 楼主 
<!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>

 
 
专业从事风水,命理,择日,取名等。
本站是提供个人知识管理的网络存储空间,所有非本站原创内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 举报
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<下一主题 | 上一主题 >
风水自学网有限公司 © 2016-2025 版权所有 页面执行0.13672秒 powered by KesionCMS 9.0