實現(xiàn)語音播報要有兩個原生API，分別是【window.speechSynthesis】【SpeechSynthesisUtterance】。

【window.speechSynthesis】的方法如下：

//獲取可用的語音包，如果返回數(shù)組是空，則沒有可用的語音包。不同瀏覽器的語音包數(shù)量是不一樣的。
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】。下面是語音包返回的部分數(shù)據(jù)【window.speechSynthesis.getVoices();】

//【Edge瀏覽器】語言包數(shù)據(jù)格式如下：
[
  {
    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)",
  },
];

//【谷歌瀏覽器】語言包數(shù)據(jù)格式如下：
[
  {
    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", () => {});// 監(jiān)聽播報完成狀態(tài)，播完可以做些其它處理

語音播報的完整功能如下：（可將代碼復制到瀏覽器的控制臺運行。在Edge瀏覽器能播報，谷歌瀏覽器不能播報。）

//window.speechSynthesis.cancel();//播報前建議調用取消的函數(shù)，如有正在播報的話音，播報會任務被塞進入隊列，只有等上一個語音結束才會執(zhí)行下一個語音
//獲取語音包
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();】方法，再異步執(zhí)行上面【完整語音播報】再能播報語音。原因是第一次【window.speechSynthesis.getVoices();】獲取的數(shù)據(jù)是空數(shù)組，第二次異步調用【window.speechSynthesis.getVoices();】才返回非空數(shù)組。

以上是js實現(xiàn)的方案，有的瀏覽器會禁用該API。
另一方案：前端結合后端實現(xiàn)，使用audio標簽+mp3文件鏈接。由后端根據(jù)文本內容生成mp3語音文件，前端通過鏈接加載mp3文件并自動播放?？蓞⒖颊W(wǎng)站的實現(xiàn)方案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，是用谷歌的語音引擎，源碼是用了下面的接口：

//谷歌語音播報的接口（免費），國內網(wǎng)絡不可訪問該接口。國外網(wǎng)絡可直接用瀏覽器訪問。
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后則沒數(shù)據(jù)返回，用于生產環(huán)境會有問題。所以建議用百度智能云或訊飛語音收費的語音接口。

//用瀏覽器訪問，會返回一個mp3文件。
https://fanyi.baidu.com/gettts?lan=zh&spd=5&text=利用百度翻譯實現(xiàn)(普通話)語音播放
https://fanyi.baidu.com/gettts?lan=cte&spd=5&text=利用百度翻譯實現(xiàn)(粵語)語音播放