js前端实现语音播报

实现语音播报要有两个原生API，分别是【window.speechSynthesis】【SpeechSynthesisUtterance】。

【window.speechSynthesis】的方法如下：

//获取可用的语音包，如果返回数组是空，则没有可用的语音包。不同浏览器的语音包数量是不一样的。
window.speechSynthesis.getVoices();

//instance是SpeechSynthesisUtterance的实例，绑定了语音包。将话语添加到话语队列中；当任何其他话语在它被说出之前排队时，它将被说出。
window.speechSynthesis.speak(instance); 

// 取消语音
window.speechSynthesis.cancel();

//暂停语音
// window.speechSynthesis.pause();

//恢复语音
 window.SpeechSynthesis.resume();

注意：中文的语音包lang关键字：1普通话【zh-CN】、2粤语【zh-HK】、3台湾【zh-TW】。下面是语音包返回的部分数据【window.speechSynthesis.getVoices();】

//【Edge浏览器】语言包数据格式如下：
[
  {
    default: true,
    lang: "en-US",
    localService: true,
    name: "Microsoft Zira Desktop - English (United States)",
    voiceURI: "Microsoft Zira Desktop - English (United States)",
  },
  {
    default: false,
    lang: "zh-HK",
    localService: false,
    name: "Microsoft HiuMaan Online (Natural) - Chinese (Hong Kong)",
  },
  {
    default: false,
    lang: "zh-CN",
    localService: false,
    name: "Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)",
    voiceURI: "Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)",
  },
];

//【谷歌浏览器】语言包数据格式如下：
[
  {
    default: true,
    lang: "en-US",
    localService: true,
    name: "Microsoft Zira Desktop - English (United States)",
    voiceURI: "Microsoft Zira Desktop - English (United States)",
  },
  {
    default: false,
    lang: "zh-CN",
    localService: false,
    name: "Google 普通话（中国大陆）",
    voiceURI: "Google 普通话（中国大陆）",
  },
  {
    default: false,
    lang: "zh-HK",
    localService: false,
    name: "Google 粤語（香港）",
    voiceURI: "Google 粤語（香港）",
  },
  {
    default: false,
    lang: "zh-TW",
    localService: false,
    name: "Google 國語（臺灣）",
    voiceURI: "Google 國語（臺灣）",
  },
];

【SpeechSynthesisUtterance】的使用方法如下：

//实例化播报内容
var instance = new SpeechSynthesisUtterance(); 
instance.text = textContent; // 文字内容: 测试内容
instance.lang = "zh-CN"; // 使用的语言:中文
instance.volume = 1; // 声音音量：1
instance.rate = 1; // 语速：1
instance.pitch = 1; // 音高：1
//instance.voice = null; // 某人的声音
instance.voice = window.speechSynthesis.getVoices()[0];//选中第一个语音包
instance.addEventListener("end", () => {});// 监听播报完成状态，播完可以做些其它处理

语音播报的完整功能如下：（可将代码复制到浏览器的控制台运行。在Edge浏览器能播报，谷歌浏览器不能播报。）

//window.speechSynthesis.cancel();//播报前建议调用取消的函数，如有正在播报的话音，播报会任务被塞进入队列，只有等上一个语音结束才会执行下一个语音
//获取语音包
var listArr = window.speechSynthesis.getVoices();
listArr = listArr.filter(item=>item.lang.indexOf('zh-')>-1);
if(listArr.length == 0){
    console.error('没有可用的中文语音!');
    alert('没有可用的中文语音!');
}
//实例化播报内容
var instance = new SpeechSynthesisUtterance(); 
instance.text = '春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！'; // 文字内容: 测试内容
instance.lang = listArr[0].lang || "zh-CN"; // 使用的语言:中文
instance.volume = 1; // 声音音量：1
instance.rate = 1; // 语速：1
instance.pitch = 1; // 音高：1
instance.voice = listArr[0]; // 某人的声音
window.speechSynthesis.speak(instance); // 播放

注：在某些浏览器，必须先提前调用【window.speechSynthesis.getVoices();】方法，再异步执行上面【完整语音播报】再能播报语音。原因是第一次【window.speechSynthesis.getVoices();】获取的数据是空数组，第二次异步调用【window.speechSynthesis.getVoices();】才返回非空数组。

以上是js实现的方案，有的浏览器会禁用该API。
另一方案：前端结合后端实现，使用audio标签+mp3文件链接。由后端根据文本内容生成mp3语音文件，前端通过链接加载mp3文件并自动播放。可参考政府网站的实现方案https://www.gz.gov.cn/。

<!--html标签-->
<audio controls="controls" autoplay class="bbyinpin" name="media">
  <source type="audio/mp3" src="https://www.test.com/aaa.mp3">
</audio>

PS:node将文本转mp3可用google-tts-api库【npm install google-tts-api】https://www.npmjs.com/package/google-tts-api，是用谷歌的语音引擎，源码是用了下面的接口：

//谷歌语音播报的接口（免费），国内网络不可访问该接口。国外网络可直接用浏览器访问。
https://translate.google.com/translate_tts?ie=UTF-8&q=我是语音播报的内容：今天又是美好的一天！&tl=zh&total=1&idx=0&textlen=11&client=tw-ob&prev=input&ttsspeed=1

var obj = {
  ie: "UTF-8",
  q: "语音内容",
  textlen: 4, //文本长度
  tl: "zh", //【中文普通话（中国简体）zh】【中文粤语（香港繁体）yue-Hant-HK】【中文普通话（台湾繁体）zh-TW】
  total: 1,
  idx: 0,
  client: "tw-ob",
  prev: "input",
  ttsspeed: 0.9, //语音速度【0-1】
};
Object.keys(obj).map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) .join("&");

国内用【百度翻译】的接口（免费,接口不支持服务端调用，仅能浏览器地址栏调用），文本长度超过1000后则没数据返回，用于生产环境会有问题。所以建议用百度智能云或讯飞语音收费的语音接口。

//用浏览器访问，会返回一个mp3文件。
https://fanyi.baidu.com/gettts?lan=zh&spd=5&text=利用百度翻译实现(普通话)语音播放
https://fanyi.baidu.com/gettts?lan=cte&spd=5&text=利用百度翻译实现(粤语)语音播放