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 =newSpeechSynthesisUtterance();
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
对象实现。
functiongetVoices(){returnnewPromise((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
创建一个可交互的语音合成应用。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>语音合成示例 - 中文</title><style>label{display: block;margin-top: 10px;}textarea{width: 100%;height: 100px;}</style></head><body><h1>语音合成示例 - 中文</h1><labelfor="textToSpeak">请输入要朗读的文本:</label><textareaid="textToSpeak"placeholder="请输入要朗读的文本..."></textarea><br><labelfor="voiceSelect">选择语音:</label><selectid="voiceSelect"><optionvalue="">请选择一个语音</option></select><br><labelfor="volumeSlider">调整音量:</label><inputtype="range"id="volumeSlider"min="0"max="1"step="0.1"value="1"><br><buttononclick="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);}});});});functionspeak(){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 =newSpeechSynthesisUtterance(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('您的浏览器不支持语音合成。');}}functiongetVoices(){returnnewPromise((resolve)=>{const voices = speechSynthesis.getVoices();if(voices.length !==0){resolve(voices);}else{
speechSynthesis.onvoiceschanged=()=>{resolve(speechSynthesis.getVoices());};}});}</script></body></html>
标签：
前端
本文转载自: https://blog.csdn.net/hongkid/article/details/142822783
版权归原作者 hongkid 所有， 如有侵权，请联系我们删除。
版权归原作者 hongkid 所有， 如有侵权，请联系我们删除。