|
主题: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> |
|
专业从事风水,命理,择日,取名等。 本站是提供个人知识管理的网络存储空间,所有非本站原创内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 举报 | |
支持(0) | 反对(0) 顶端 底部 |
<下一主题 | 上一主题 > |