npm install speak-tts

import Speech from 'speak-tts'

import Speech from 'speak-tts';
const speech = new Speech();
// 檢測瀏覽器是否支持，returns a boolean
if(speech.hasBrowserSupport()) {
	console.log("語音引擎加載成功，支持播報")
}else {
	console.log('此瀏覽器不支持語音播報')
}

// 簡單示例
speech.init().then((data) => {
    // speech對象包含可用語音列表和語音合成參數(shù)
    console.log("語音已準備就緒，聲音可用", data)
}).catch(e => {
    console.error("初始化時發(fā)生錯誤: ", e)
})
// 完整配置示例
speech.init({
   volume: 1, // 音量
   lang: 'zh-CN', // 語言
   rate: 1, // 語速1正常語速，2倍語速就寫2
   pitch: 1, // 音調(diào)
   splitSentences: true, // 在句子結(jié)束時暫停
   listeners: {
     // 事件
     onvoiceschanged: voices => {
       // console.log('事件聲音已更改', voices);
     },
   },
 })
 .then(data => {
   console.log('語音已準備好，聲音可用', data);
 })
 .catch(e => {
   console.error('初始化時發(fā)生錯誤 : ', e);
 });
// 閱讀文本
// text：要朗讀的文本
// queue：默認 true: 如果設置為 false，當前語音發(fā)音將被中斷
// listeners: 播報是否成功的回調(diào)
speech.speak({
  text: '您有新的訂單響起請注意查收', //這里使用文字或者i18n 都可以 看自己需求
  queue: true,
  listeners: {
     //  開始播放
     onstart: () => {
       console.log('Start utterance')
     },
     //  判斷播放是否完畢
     onend: () => {
       console.log('End utterance')
     },
     //  恢復播放
     onresume: () => {
       console.log('Resume utterance')
     },
  }
})
.then(() => {
  console.log('成功!');
})
.catch(e => {
  console.error('發(fā)生錯誤:', e);
});

// 設置語言（注意該語言必須是客戶端瀏覽器支持的）：
Speech.setLanguage('zh-CN')
// 設置語音（注意語音必須客戶端瀏覽器支持）：
Speech.setVoice('Fiona') //您可以傳遞由 init() 函數(shù)返回的 SpeechSynthesisVoice 或僅傳遞其名稱
// 設置語速:
Speech.setRate(1) 
// 設置音量：
Speech.setVolume(1) 
// 設置音調(diào):
Speech.setPitch(1)
// 暫停正在進行的談話：
Speech.pause()
// 繼續(xù)正在進行的談話：
Speech.resume()
// 取消正在進行的談話：
Speech.cancel()
// 獲取布爾值，指示話語隊列是否包含尚未說出的話語：
Speech.pending()
// 獲取布爾值表示談話是否暫停：
Speech.paused()
// 獲取布爾值表示談話是否正在進行中：
Speech.speaking()