<!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>
标签:文字,function,const,option,js,语音,synth,msg,document
From: https://www.cnblogs.com/alinda/p/17197378.html