Web Speech 是浏览器自带的语音功能，主要具有以下两大作用：
运行以下 HTML 代码后，点击“Start”按钮，浏览器会在左上角弹出申请使用麦克风权限的提示。若点击“同意”，即可开始说话并进行录音；若点击“拒绝”，则无法继续使用语音功能。
在说话的过程中，页面上会陆续显示对应的识别文本。点击“Stop”按钮结束录音后，页面将展示最终的文本结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div id="tempResult"></div>
<div id="finalResult"></div>
<script>
// 创建识别实例
const recognition = new SpeechRecognition()
// 配置参数
recognition.continuous = true // 是否持续监听
recognition.interimResults = true // 是否返回临时结果
recognition.lang = 'zh-CN' // 设置识别语言
recognition.maxAlternatives = 3 // 返回最多3个候选结果
// 处理识别结果
recognition.onresult = (event) => {
let interimTranscript = '' // 开始录音后生成文本临时结果
let finalTranscript = '' // 点击结束录音后会生成一个最终结果
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript
if (event.results[i].isFinal) { // 录音是否结束
finalTranscript += transcript
} else {
interimTranscript += transcript
}
}
document.querySelector('#tempResult').innerHTML = `临时结果: ${interimTranscript}`
document.querySelector('#finalResult').innerHTML = `最终结果: ${finalTranscript}`
};
// 错误处理
recognition.onerror = (event) => {
console.error('识别错误:', event.error)
if (event.error === 'no-speech') {
alert('未检测到语音输入，请重试')
}
}
// 启动/停止识别
document.querySelector('#startBtn').addEventListener('click', () => {
recognition.start()
})
document.querySelector('#stopBtn').addEventListener('click', () => {
recognition.stop()
})
</script>
</body>
</html>
运行以下 HTML 代码后，点击“播报”按钮，浏览器便会朗读文本框中的文字。您也可以修改文本框中的内容后再次点击“播报”按钮，即可播放任意文字。
需要注意的是，下方示例代码将语言设置为中文。如果在文本框中输入英文，可能会发现朗读效果有些奇怪。这并非 API 本身存在问题，而是语言设置不匹配所致。您只需将示例代码中的中文语言设置注释掉，再将英文语言的设置解除注释，即可听到非常地道的英文朗读效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本转语音</title>
</head>
<body>
<textarea id="textInput" rows="3" cols="40" placeholder="请输入要播报的文本">你好世界，我是一个好人</textarea>
<button id="speakBtn">播报</button>
<script>
const textInput = document.querySelector('#textInput')
const speakBtn = document.querySelector('#speakBtn')
speakBtn.addEventListener('click', function() {
const text = textInput.value.trim()
if (!text) {
alert('请输入要播报的文本')
return
}
// 如果正在播报，先取消
if (speechSynthesis.speaking) {
speechSynthesis.cancel()
}
// 创建语音合成实例
const utterance = new SpeechSynthesisUtterance(text)
utterance.lang = 'zh-CN' // 中文 'zh-CN'
// utterance.lang = 'en-US' // 英文 'en-US'
utterance.rate = 1.0 // 语速
utterance.pitch = 1.0 // 音调, 修改这个值可以得到不同的声音
utterance.volume = 1.0 // 音量
// 开始播报
speechSynthesis.speak(utterance)
})
// 加载语音列表（部分浏览器需异步加载）
speechSynthesis.onvoiceschanged = function() {
speechSynthesis.getVoices()
}
</script>
</body>
</html>
上述代码主要涉及两个核心对象：
SpeechSynthesisUtterance 是一个语音请求实例，负责封装待合成的文本内容及其发音参数。其主要属性包括：
speechSynthesis 是一个全局控制器对象，负责管理语音合成引擎的执行与状态。
属性：
paused（只读）：是否处于暂停状态，返回布尔值
pending（只读）：语音队列中是否还有未播放的语音
speaking（只读）：是否正在播放语音（即使处于暂停状态也返回 true）
方法：
speak(utterance)：将 SpeechSynthesisUtterance 实例加入语音队列并开始播放
cancel()：清空语音队列，立即停止所有正在播放或等待播放的语音
pause()：暂停当前播放的语音
resume()：恢复暂停的语音播放
getVoices()：获取当前浏览器支持的所有可用语音列表（返回 SpeechSynthesisVoice 对象数组）
↶ 返回首页 ↶