JavaScript纯前端实现语音播报和朗读功能

核心API介绍

要实现语音播报功能，需要依赖两个原生的JavaScript API。

这两个API分别是window.speechSynthesis和SpeechSynthesisUtterance。

以下是具体的项目代码示例。

// 执行函数
initVoice({
  text: '项目介绍',
  vol: 1,
  rate: 1
})
 
// 函数
export function initVoice(config) {
  window.speechSynthesis.cancel();//播报前建议调用取消的函数，如有正在播报的话音，播报会任务被塞进入队列，只有等上一个语音结束才会执行下一个语音
  //获取语音包
  let listArr = window.speechSynthesis.getVoices();
  listArr = listArr.filter(item => item.lang.indexOf('zh-') > -1);
  if (listArr.length == 0) {
    console.error('没有可用的中文语音!');
  }
  //实例化播报内容
  let instance = new SpeechSynthesisUtterance();
  instance.text = config.text || '轻轻敲醒沉睡的心灵，慢慢张开你的眼睛，看看忙碌的世界，是否依然孤独的转个不停！'; // 文字内容
  instance.lang = config.lang || "zh-CN"; // 使用的语言:中文
  instance.volume = config.vol || 1; // 声音音量：1
  instance.rate = config.rate || 1; // 语速：1
  instance.pitch = 1; // 音高：1
  window.speechSynthesis.speak(instance); // 播放
  instance.addEventListener("end", () => {});// 监听播报完成状态，播完可以做些其它处理    
}

将提供的函数代码复制到项目中，直接调用该函数即可实现语音播报功能。

下面列举了一些常用的执行方法。

//获取可用的语音包，如果返回数组是空，则没有可用的语音包。不同浏览器的语音包数量是不一样的。
window.speechSynthesis.getVoices();
 
//instance是SpeechSynthesisUtterance的实例，绑定了语音包。将话语添加到话语队列中；当任何其他话语在它被说出之前排队时，它将被说出。
window.speechSynthesis.speak(instance); 
 
// 取消语音
window.speechSynthesis.cancel();
 
//暂停语音
// window.speechSynthesis.pause();
 
//恢复语音
 window.SpeechSynthesis.resume();

浏览器兼容性注意事项

需要注意：在某些浏览器中，必须先提前调用window.speechSynthesis.getVoices();方法，随后再异步执行上述的完整语音播报流程，才能正常播报语音。

这是因为第一次调用window.speechSynthesis.getVoices();时，获取到的数据通常是空数组。

只有当第二次异步调用window.speechSynthesis.getVoices();时，才会返回包含可用语音的非空数组。

至此，关于JavaScript纯前端实现语音播报和朗读功能的介绍已结束。如需了解更多相关JavaScript语音播报与朗读内容，建议搜索本站历史文章或继续浏览下方的相关文章，希望大家今后多多支持本站！