浏览器内置文字转语音，播报功能Web Speech API - SpeechSynthesisUtterance
hongkid 2024-10-25 14:33:01 阅读 65
SpeechSynthesisUtterance: 让网页说话的艺术
在现代Web开发中，让网页具有语音功能可以极大提升用户体验，特别是对于视障用户或需要多任务处理的场景。<code>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 创建一个可交互的语音合成应用。
<code><!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<title>语音合成示例 - 中文</title>
<style>
label { -- --> display: block; margin-top: 10px; }
textarea { width: 100%; height: 100px; }
</style>
</head>
<body>
<h1>语音合成示例 - 中文</h1>
<label for="textToSpeak">请输入要朗读的文本:</label>code>
<textarea id="textToSpeak" placeholder="请输入要朗读的文本..."></textarea>code>
<br>
<label for="voiceSelect">选择语音:</label>code>
<select id="voiceSelect">code>
<option value="">请选择一个语音</option>code>
</select>
<br>
<label for="volumeSlider">调整音量:</label>code>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">code>
<br>
<button onclick="speak()">朗读</button>code>
<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>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。