JS如何实现语音合成_JavaScriptWebSpeechAPI语音合成功能使用方法

javaScript可通过Web Speech API实现文本转语音,首先检测浏览器是否支持speechSynthesis接口,然后创建SpeechSynthesisUtterance实例设置文本、音量、语速、音调和语言等参数,调用speak()方法播放语音;通过getVoices()获取可用语音列表并选择特定语言或声音,还可使用pause()、resume()和cancel()控制播放状态,适用于网页语音提示与辅助功能,需注意兼容性及用户交互触发限制。

JS如何实现语音合成_JavaScriptWebSpeechAPI语音合成功能使用方法

javascript 可以通过 Web Speech API 实现语音合成功能,这项技术被称为“文本转语音”(Text-to-Speech)。现代浏览器提供了 window.speechSynthesis 接口,允许开发者将文字内容朗读出来。使用起来简单直接,适合在网页中添加语音提示、辅助阅读等功能。

1. 检测浏览器是否支持语音合成

在调用语音合成功能前,先确认当前浏览器是否支持 Web Speech API 的 speechSynthesis 模块。

 if ('speechSynthesis' in window) {   // 支持语音合成   console.log('浏览器支持语音合成'); } else {   console.log('当前浏览器不支持语音合成'); } 

2. 基本语音合成使用方法

使用 speechSynthesis.speak() 方法可以播放语音。需要创建一个 SpeechSynthesisUtterance 实例来定义要朗读的内容和相关参数。

 const utterance = new SpeechSynthesisUtterance('你好,这是一段测试语音'); speechSynthesis.speak(utterance); 

上面代码会朗读指定的中文文本。你可以更改文本内容实现不同语句的播报。

立即学习Java免费学习笔记(深入)”;

3. 设置语音参数(语速、音调、音量、语言)

SpeechSynthesisUtterance 支持多种属性设置,让语音更符合需求。

  • text:要朗读的文本
  • volume:音量,范围 0 到 1
  • rate:语速,0.1 到 10,正常值为 1
  • pitch:音调,0 到 2,正常值为 1
  • lang:语言,如 ‘zh-CN’(中文)、’en-US’(英文)

 const utterance = new SpeechSynthesisUtterance(); utterance.text = '欢迎使用语音合成功能'; utterance.volume = 1;     // 最大音量 utterance.rate = 1;       // 正常语速 utterance.pitch = 1;      // 正常音调 utterance.lang = 'zh-CN'; // 使用中文  speechSynthesis.speak(utterance); 

4. 获取可用的语音列表

不同设备和浏览器提供的语音选项不同。可以通过 speechSynthesis.getVoices() 获取系统支持的语音列表,然后选择特定语音。

 // 获取语音列表(异步加载) function populateVoices() {   const voices = speechSynthesis.getVoices();   voices.forEach(voice => {     console.log(voice.name, voice.lang);   }); }  // 第一次调用时可能为空,需监听 voiceschanged 事件 speechSynthesis.addEventListener('voiceschanged', populateVoices);  // 调用一次立即尝试获取 populateVoices(); 

获取到语音后,可指定某一种语音:

 utterance.voice = voices.find(v => v.lang === 'zh-CN'); 

5. 控制语音播放(暂停、恢复、取消)

可以对正在或即将播放的语音进行控制:

  • speechSynthesis.pause(); —— 暂停播放
  • speechSynthesis.resume(); —— 恢复播放
  • speechSynthesis.cancel(); —— 取消当前及队列中的所有语音

例如,在用户点击按钮时取消语音:

 document.getElementById('stop-btn').addEventListener('click', () => {   speechSynthesis.cancel(); }); 

基本上就这些。Web Speech API 的语音合成功能在大多数现代浏览器中运行良好,但注意部分功能在移动端或低版本浏览器中可能受限。建议加入兼容性判断和用户交互触发机制(比如必须由用户点击才能发声),避免被浏览器阻止。

上一篇
下一篇
text=ZqhQzanResources