实现语音播报要有两个原生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=利用百度翻译实现(粤语)语音播放
