前言

最近在做排隊叫號系統，涉及到文字轉語音播報，因此總結了幾種前端文字轉語音發聲的方法。

一、Web Speech API

h5新提供的一個原生語音識別技術的API，可以將文本轉成語音并播放。
作為官方的api，實現的效果是比較符合理想的，支持的語言種類也很豐富， 就是兼容性上不太友好。下面兼容情況。

const synth = window.speechSynthesis; // 啟用文本 const msg = new SpeechSynthesisUtterance(); // 表示一次發音請求。其中包含了將由語音服務朗讀的內容，以及如何朗讀它（例如：語種、音高、音量）。// 語音播報的函數 const handleSpeak=(text)=> {msg.text = text; // 文字內容: 測試內容msg.lang = "zh-CN"; // 使用的語言:中文msg.volume = 1; // 聲音音量：1msg.rate = 1; // 語速：1msg.pitch = 1; // 音高：1synth.speak(msg); // 播放},// 語音停止 const handleStop=(e)=> {msg.text = e;msg.lang = "zh-CN";synth.cancel(msg); // 取消該次語音播放}

補充：其他相關回調函數

speech.lang 獲取并設置話語的語言（en-US、zh-CN）
speech.pitch 獲取并設置話語的音調 (值越大越尖銳，range:0-2, default:1, float)
speech.rate 獲取并設置說話的速度 (值越大語速越快, range:0.1-10, default:1, float)
speech.text 獲取并設置說話時的文本
speech.voice 獲取并設置說話的聲音
speech.volume 獲取并設置說話的音量 (range: 0-1, default:1, float)
speech.onboundary
speech.onend 播放結束的回調
speech.onerror 播放出現錯誤的回調
speech.onmark 當讀到標記文本時的回調
speech.onpause 播放暫停
speech.onresume 播放重啟
speech.onstart 播放開始的回調

二、speak-tts

基于Web Speech API開發的組件，跟Web Speech API用法差不多，但是多了下載和引入的部分。同理存在兼容性問題。

// 下載npm install speak-tts // 引入import Speech from 'speak-tts'const speech = ref(null);const speechInit = () => {speech.value = new Speech();speech.value?.setLanguage("zh-CN");speech.value?.init().then(() => {console.log("語音播報初始化完成");}); };const speak = () => {speech.value?.speak({ text: "測試發聲" }).then(() => {console.log("播報完成");}); };

以上兩種方法，在windows與ios環境下的瀏覽器均好用，但是在android系統下不可用。為了解決此問題衍可采用一下寫法。

三、uniapp for TTS離線語音合成

MT-TTS
安卓原生離線語音合成引擎工具插件
MT-TTS-Speech
調用安卓系統已安裝的TTS進行語音合成播放
uniapp官網插件下載地址

var TTSSpeech = uni.requireNativePlugin("MT-TTS-Speech");TTSSpeech.getInstallTTS(list => {console.log("====");list.forEach(v => console.log(`引擎名 ${v.label} 包名：${v.name}`));})TTSSpeech.init((status) => {if(status === 0){console.log('引擎初始化成功')TTSSpeech.speak({ text: '測試發聲'})}}, 'com.iflytek.speechcloud')

四、由后端生成音頻文件采用原生document進行播放

const queue = ref([]); queue.value.push(newValue.callUri); const interval = ref({}); //定時器 let soundID = 0; const playServer = function () {console.log("開啟播放線程");var ctrlAudio = document.getElementById("audio");interval.value = setInterval(function () {if (queue.value.length > 0) {console.log("待播放音頻數:" + queue.value.length);}if (queue.value.length > 0 && ctrlAudio.paused) {ctrlAudio.volume = 1;ctrlAudio.setAttribute("src", queue.value[0]);ctrlAudio.play();queue.value.splice(0, 1);}}, 500); }; onMounted(() => {soundID = setTimeout(playServer, 1000); }); onBeforeUnmount(() => {clearTimeout(soundID);soundID = 0; });

總結

以上是生活随笔為你收集整理的JS文字转语音技术实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。