当前位置：首页 > news >正文

浏览器内置文字转语音，播报功能Web Speech API - SpeechSynthesisUtterance

news 2025/1/11 17:48:10

SpeechSynthesisUtterance: 让网页说话的艺术

在现代Web开发中，让网页具有语音功能可以极大提升用户体验，特别是对于视障用户或需要多任务处理的场景。SpeechSynthesisUtterance 是 Web Speech API 中的一个接口，它允许开发者创建一个语音合成对象，该对象可以用来控制语音输出的内容、语言、速度等属性。

什么是 SpeechSynthesisUtterance？

SpeechSynthesisUtterance 对象代表了一段将要通过浏览器的语音合成服务朗读出来的文本。每个 SpeechSynthesisUtterance 实例都可以设置不同的属性，如文本内容、声音类型、音量、语速等，以满足不同场景下的需求。

使用方法

首先，你需要检查用户的浏览器是否支持 speechSynthesis 接口。大多数现代浏览器（如 Chrome, Firefox, Edge, Safari）都支持此功能。

if ('speechSynthesis' in window) {console.log('Your browser supports speech synthesis!');
} else {console.log('Sorry, your browser does not support speech synthesis.');
}

接下来，你可以创建一个新的 SpeechSynthesisUtterance 对象，并设置其属性：

const utterance = new SpeechSynthesisUtterance();
utterance.text = 'Hello, world!';
utterance.lang = 'en-US'; // 设置语言为美式英语
utterance.rate = 1; // 设置语速，1为正常速度
utterance.pitch = 1; // 设置音调，1为正常音调
utterance.volume = 1; // 设置音量，1为最大音量// 发出语音
window.speechSynthesis.speak(utterance);

使用语音包

虽然 SpeechSynthesisUtterance 提供了一些基本的属性来调整语音效果，但有时候我们可能希望使用特定的声音来增强用户体验。这可以通过选择不同的 Voice 对象实现。

function getVoices() {return new Promise((resolve) => {const voices = speechSynthesis.getVoices();if (voices.length !== 0) {resolve(voices);} else {speechSynthesis.onvoiceschanged = () => {resolve(speechSynthesis.getVoices());};}});
}getVoices().then(voices => {// 选择第一个可用的语音const voice = voices[0];// 或者选择特定的语音const specificVoice = voices.find(v => v.name === 'Google UK English Female');utterance.voice = specificVoice;window.speechSynthesis.speak(utterance);
});

完整的 HTML Demo

下面是一个简单的 HTML 页面示例，展示了如何使用 SpeechSynthesisUtterance 创建一个可交互的语音合成应用。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语音合成示例 - 中文</title>
<style>label { display: block; margin-top: 10px; }textarea { width: 100%; height: 100px; }
</style>
</head>
<body>
<h1>语音合成示例 - 中文</h1>
<label for="textToSpeak">请输入要朗读的文本:</label>
<textarea id="textToSpeak" placeholder="请输入要朗读的文本..."></textarea>
<br>
<label for="voiceSelect">选择语音:</label>
<select id="voiceSelect"><option value="">请选择一个语音</option>
</select>
<br>
<label for="volumeSlider">调整音量:</label>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
<br>
<button onclick="speak()">朗读</button><script>
document.addEventListener('DOMContentLoaded', () => {// 初始化语音选择下拉框getVoices().then(voices => {const select = document.getElementById('voiceSelect');voices.forEach(voice => {if (voice.lang === 'zh-CN') {const option = document.createElement('option');option.value = voice.name;option.textContent = `${voice.name} (${voice.lang})`;select.appendChild(option);}});});
});function speak() {if ('speechSynthesis' in window) {const text = document.getElementById('textToSpeak').value;const selectedVoiceName = document.getElementById('voiceSelect').value;const volume = parseFloat(document.getElementById('volumeSlider').value);const utterance = new SpeechSynthesisUtterance(text);utterance.lang = 'zh-CN'; // 设置语言为中文utterance.volume = volume; // 设置音量// 获取所有可用的语音getVoices().then(voices => {// 选择用户选择的中文语音const selectedVoice = voices.find(v => v.name === selectedVoiceName);if (selectedVoice) {utterance.voice = selectedVoice;} else {console.warn('没有找到用户选择的语音包，使用默认语音。');}window.speechSynthesis.speak(utterance);});} else {alert('您的浏览器不支持语音合成。');}
}function getVoices() {return new Promise((resolve) => {const voices = speechSynthesis.getVoices();if (voices.length !== 0) {resolve(voices);} else {speechSynthesis.onvoiceschanged = () => {resolve(speechSynthesis.getVoices());};}});
}
</script>
</body>
</html>