浏览器语音合成(Speech Synthesis)
编辑
14
2024-09-07
Web Speech API 包括了语音合成(Speech Synthesis)
示例代码
演示地址:https://www.yhc.red/web-speech-api-tts-example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Speech API Text-To-Speech Example with Voice Selection</title>
</head>
<body>
<h1>Web Speech API Text-To-Speech Example with Voice Selection</h1>
<textarea id="textToSpeak" rows="4" cols="50" placeholder="Enter text to speak..."></textarea>
<br>
<label for="voiceSelect">Select Voice:</label>
<select id="voiceSelect">
</select>
<br>
<button id="speakButton">Speak</button>
<script>
// 检查浏览器是否支持 Web Speech API 的语音合成部分
if (!('speechSynthesis' in window)) {
console.error('Your browser does not support the Web Speech API.');
}
// 获取语音合成对象
const synth = window.speechSynthesis;
// 获取所有可用的发音人
let voices = [];
updateVoices();
// 创建一个用于语音合成的 Utterance 对象
const utterance = new SpeechSynthesisUtterance();
// 初始化 Utterance 对象
document.getElementById('speakButton').addEventListener('click', () => {
utterance.text = document.getElementById('textToSpeak').value;
utterance.lang = 'zh-CN'; // 设置语言为中文(简体)
utterance.voice = getSelectedVoice();
synth.speak(utterance);
});
// 更新发音人列表
function updateVoices() {
voices = synth.getVoices();
displayVoices();
}
// 显示发音人列表
function displayVoices() {
const select = document.getElementById('voiceSelect');
select.innerHTML = '';
voices.forEach(voice => {
const option = document.createElement('option');
option.value = voice.name;
option.textContent = `${voice.name} (${voice.lang})`;
select.appendChild(option);
});
}
// 获取当前选中的发音人
function getSelectedVoice() {
const selectedVoiceName = document.getElementById('voiceSelect').value;
return voices.find(voice => voice.name === selectedVoiceName);
}
// 监听语音合成系统的改变事件
synth.onvoiceschanged = () => {
updateVoices();
};
// 初始化页面加载时的发音人列表
window.addEventListener('load', () => {
updateVoices();
});
</script>
</body>
</html>
兼容性和注意事项
浏览器支持
确保您的浏览器支持 Web Speech API 的语音合成部分。大多数现代浏览器(如 Chrome、Firefox、Edge 等)都支持
语言支持
不同的浏览器可能支持不同的语言。确保您设置的语言是浏览器支持的
权限
在某些情况下,浏览器可能会询问是否允许使用语音合成功能,请确保您允许了这个请求
扩展功能
选择不同的发言人
您可以使用 speechSynthesis.getVoices()
获取可用的声音选项,并设置 utterance.voice
来选择不同的发音人。
const voices = synth.getVoices();
utterance.voice = voices.find(voice => voice.name === 'Alex');
监听事件
utterance
对象支持多种事件监听,如 onstart
、onend
等,可以用来跟踪语音合成的状态
utterance.onstart = function() {
console.log('Speaking started.');
};
utterance.onend = function() {
console.log('Speaking ended.');
};
- 0
- 0
-
分享