使用HTML5+JS實現文字轉語音

用HTML5+JS實現文字轉語音

現在越來越多的視頻采用了AI語音，下面給大家介紹幾種簡單的文字轉語音的辦法，完全免費的歐。

使用HTML5語音合成API-SpeechSynthesis實現的文字轉語音

因為SpeechSynthesis完全是由瀏覽器端實現的文字轉語音，大家可以用下面命令測試一下自己使用的瀏覽器支持哪些文字轉成語音，方法很簡單。

打開瀏覽器任意頁面，點擊F12打開瀏覽器調試控制臺，
點擊【控制臺】或者是【console】切換到控制臺頁面，在提示符>位置輸入speechSynthesis.getVoices()并回車。
有些瀏覽器控制臺默認是禁止復制粘貼的這調代碼有可能要手動輸入allow pasting來啟用復制粘貼。
不同瀏覽器支持的語音數量不同，edge支持最多有302種

Chrome支持也不少

而maxthon就支持一種

注意這個支持多寡和當前使用的操作系統版本，瀏覽器內核版本也有一定關系，各瀏覽器支持情況參考下表，數字代表開始支持的內核版本。

下面來看看用html5+js代碼怎樣實現一個簡單的頁面來實現文字轉語音

先用html語言寫一個簡單的頁面，代碼如下：

<!DOCTYPE html>
<html>

<head>
<title>HTML5+JS實現文字轉語音朗讀功能</title>
</head>

<body>
<article>
<h3 align="center">請在下面文本框中輸入要轉換的文字：</h3>
<p>
<textarea id="texts" rows="15" class="_play">使用瀏覽器實現文字轉語音，不需要網絡。</textarea>
</p>
<p>
<label>選擇轉換語音：</label>
<select id="voiceSelect" onchange="play()"></select>
</p>
<button class="_search" onclick="play()">開始</button>
<button onclick="resume()">繼續</button>
<button onclick="pause()">暫停</button>
<!-- <button onclick="cancel()">清除隊列</button> -->
<button onclick="cls()">清空文文字</button>
</article>
</body>
</html>

效果是這樣的：

看起來比較丑，可以在<head>標簽里面加上css代碼，使頁面看起來好看一點

<head>
<title>HTML5+JS實現文字轉語音朗讀功能</title>
<style>
article {margin: 0 auto;max-width: 800px;text-align: center;}
textarea {max-width: 600px;width:100%;text-align: left;}
button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
</style>
</head>

效果如下：

為選擇轉換語音的選擇框添加js代碼

<script>
var to_speak = window.speechSynthesis;
var voiceSelect = document.querySelector("#voiceSelect");
var voices = [];
//創建選擇語言的select標簽
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for(i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}

setTimeout(function() {
populateVoiceList();
}, 500) //
</script>

這樣刷新頁面后選擇轉換語音的選擇框后面就出現一個下拉列表，里面列出了瀏覽器支持的語音。

后面為各按鈕添加js代碼：

開始：

var _play = document.querySelector("._play");
var dataName;
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
function play() {
cancel(); //一定要加這個，不加的話瀏覽器會不發聲。
to_speak = new SpeechSynthesisUtterance(_play.value);

//to_speak.rate = 1.4;// 設置播放語速，范圍：0.1 - 10之間

var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length; i++) {
if(voices[i].name === selectedOption) {
to_speak.voice = voices[i];
}
}

window.speechSynthesis.speak(to_speak);

}

繼續，暫停，清空文字：

//暫停
function pause() {
window.speechSynthesis.pause();
}
//繼續播放
function resume() {
window.speechSynthesis.resume(); //繼續
}
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
//清空文本框
function cls() {
document.getElementById("texts").value=""; 清空文本框
}

可以在播放、暫停和繼續播放里面加上檢測文本框內是否有文字的函數，有文字才播放。

//檢查文本框是否為空

function myCheckFunc() {

let x;

x = document.getElementById("texts").value;

try {

if (x === "")

throw "文本框為空";

} catch (error) {

alert( "提示" + error);

}

完整js代碼如下：

<script>
if(!('speechSynthesis' in window)) {
throw alert("對不起，您的瀏覽器不支持")
}

var _play = document.querySelector("._play"),
to_speak = window.speechSynthesis,
dataName, voiceSelect = document.querySelector("#voiceSelect"),
voices = [];

function play() {
myCheckFunc();//檢查文本框是否為空
cancel(); //
to_speak = new SpeechSynthesisUtterance(_play.value);

//to_speak.rate = 1.4;// 設置播放語速，范圍：0.1 - 10之間

var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length; i++) {
if(voices[i].name === selectedOption) {
to_speak.voice = voices[i];
}
}

window.speechSynthesis.speak(to_speak);

}

//暫停
function pause() {
myCheckFunc();//檢查文本框是否為空
window.speechSynthesis.pause();
}
//繼續播放
function resume() {
myCheckFunc();//檢查文本框是否為空
window.speechSynthesis.resume(); //繼續
}
//清除所有語音播報創建的隊列
function cancel() {
window.speechSynthesis.cancel();
}
//清空文本框
function cls() {
document.getElementById("texts").value=""; 清空文本框
}
//檢查文本框是否為空
function myCheckFunc() {
let x;
x = document.getElementById("texts").value;
try {
if (x === "")
throw "文本框為空";

} catch (error) {
alert( "提示" + error);
}
}

//創建選擇語言的select標簽
function populateVoiceList() {
voices = speechSynthesis.getVoices();
for(i = 0; i < voices.length; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';

if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}

setTimeout(function() {
populateVoiceList();
}, 500) //
</script>

這樣一個簡單的文字轉語音的網頁就做好了，而且不依賴網絡，沒網的時候也可轉換，而且使用win10系統，EDGE瀏覽器支持100多種文字。

有個小問題就是，這樣轉換瀏覽器會直接發聲，而不是輸出為文件，這個問題可以用錄屏軟件或者錄音軟件例如Adobe Audition，Cool Edit Pro等解決。

用edge播放文本內容

這種方式更簡單一點，步驟如下：

新建一個txt文件里面輸入要轉的內容，然后用EDGE瀏覽器打開這個問題文件.
點擊地址欄右側大聲朗讀按鈕

在彈出的朗讀此頁內容工具條上點擊【語音選項】，在彈出的對話框上可以設置語音的速度和語音的類型。選好之后點工具條上播放按鈕就可以播放了。

使用EDGE插件實現轉換

(1)在EDGE瀏覽器點擊右上角三個點，打開edge瀏覽器選項菜單，點擊【擴展】，打開擴展對話框，選擇打開Microsoft edge加載項

在搜索框輸入voice remaker，添加這個擴展

添加成功后，點擊瀏覽器地址欄后面的擴展圖標打開這個擴展，在彈出的對話框的文本框里面輸入要轉的文字，在voice下拉列表選擇要轉的語音點擊【convert to speech】,等待片刻就可以在下面看到轉好的語音文件，可以點擊下載來下載這個文件。

用PC端工具調用edge瀏覽器語音轉換功能實現轉換

推薦大家用edge-TTS-record這個工具版本V0.1.1,這個工具既不要錢也不需要登陸。

在文本框里輸入文字，【朗讀者】選擇語音，可以點【試聽】按鈕試聽一下，點【錄制】即可保存為wav文件。

以上這幾種方式所使用的語音轉換引擎是一樣的都是調用edge瀏覽器的SpeechSynthesis功能，所以它們里面可選擇的語音是一樣的，一般都是有幾百種，這種方式轉換出來的語音，雖然聽起來有點機械，但是對應普通的視頻配音來說完全足夠了。

5 讓我們的 Web 交互更加生動有趣，但瀏覽器的多樣性以及揮之不去的兼容問題，卻阻礙了技術發展。這并不是我們拒絕的理由，恰恰相反，它應該成為動力。

一、語音場景

文章標題為了嚴謹，所以叫音頻合成。如果用大白話來解釋，那就是「文字轉語音」。語音的場景就太多了：

點讀機：哪里不會點哪里
有聲小說：看著太累，聽起來不錯
Web 頁面警示用戶的操作
鬧鐘，提醒，小秘書
殘疾人支持

這些都是隨處可見的例子，但真正燃起我激情的是這個場景，簡直酷炫到爆。

原來動畫和語音結合起來才是最佳的用戶體驗。

二、技術核心

看完上面的動畫，按捺不住內心的好奇，隨手就翻起了源碼。Oh～原來如此，把你揪出來：

let sayhello = new window.SpeechSynthesisUtterance('你好，歡迎來到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);

事情的真相就是簡單如此，短短兩行，就實現了語音播報。

三、兼容性

如此有趣的 API，突然想到了一萬個應用場景。別忙，先來看看 SpeechSynthesis 的兼容性吧：

看起來各大瀏覽器支持的還不錯，那就試試唄！

四、API 文檔

SpeechSynthesis 接口是語音服務的控制接口，屬于網頁語音 API，它可以用于獲取設備上關于可用的合成聲音的信息，開始、暫停語音，或除此之外的其他命令。

既然瀏覽器已經普遍支持了，那么我們不妨打印出來看看。

下面我們來適當的解釋一下：

SpeechSynthesis.paused: 當 SpeechSynthesis 處于暫停狀態時， Boolean 值返回 true 。
SpeechSynthesis.pending: 當語音播放隊列到目前為止保持沒有說完的語音時， Boolean值返回 true 。
SpeechSynthesis.speaking: 當語音談話正在進行的時候，即使 SpeechSynthesis 處于暫停狀態， Boolean 返回 true 。
SpeechSynthesis.onvoiceschanged: 當由 SpeechSynthesis.getVoices() 方法返回的SpeechSynthesisVoice 列表改變時觸發。

此外，還有幾個非常實用的方法：

SpeechSynthesis.cancel(): 移除所有語音談話隊列中的談話。
SpeechSynthesis.getVoices(): 返回當前設備所有可用聲音的 SpeechSynthesisVoice 列表。
SpeechSynthesis.pause(): 把 SpeechSynthesis 對象置為暫停狀態。
SpeechSynthesis.resume(): 把 SpeechSynthesis 對象置為一個非暫停狀態：如果已經暫停了則繼續。
SpeechSynthesis.speak(): 添加一個 utterance 到語音談話隊列；它將會在其他語音談話播放完之后播放。

API 很簡單，這里就不贅述了，來個例子嘗嘗鮮。

五、代碼演示

MDN Web Docs上面有個很形象的例子，我們拿過來學習學習：

注意：這里為了演示，只列出了核心代碼，完整代碼請看下面「完整示例」。

六、補充：SpeechRecognition

既然提到了文字轉語音，那么不得不提到語音識別。

SpeechRecognition 顧名思義，語音識別，屬于網頁語音 API。需要麥克風等音頻輸入設備的支持，可以識別用戶的語音輸入，并且轉化成文字。

SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：

七、未來暢想

相信不久的未來，瀏覽器會逐步統一，兼容問題將會化為烏有。你看，微軟不也低下了高貴的頭顱，投入了谷歌的懷抱。

我們將會用更多的時間去探索技術，而不是去兼容老破舊的網站或者機器。當然，Web 技術會大行其道，用戶將會擁有到更加有趣的體驗。

eb瀏覽器變得越來越強大，像Web音頻API和音頻數據API這樣的新API使Web變得越來越有趣和動態。盡管聲音是一種感官，但由于技術支持的不一致，它在很大程度上已經從網絡上消失了。在現代瀏覽器中，支持HTML5音頻可能很乏味，更不用說傳統的瀏覽器了。在真實世界的訪問者中，使用范圍廣泛的設備，如IE6的瀏覽器，可以有很多支持案例來考慮。

在本文中，我們收集了一個較佳工具列表，可以幫助您使用它們的API在網頁或應用程序上操作和播放音頻資源。以下工具、插件和JS庫將幫助您使用聲音進行游戲、合成器、音頻播放器等，一切都在瀏覽器的適用范圍內。

1.Soundsnap

Soundsnap是一個很好的平臺，可以合法地查找和共享免費的聲音效果和循環。它是由用戶制作或錄制的原始聲音的集合，而不是商業圖書館或示例CD上的歌曲或聲音效果。

2.VexFlow

VexFlow是一個開源的基于Web的音樂符號呈現API。它完全用javascript編寫，并在瀏覽器中運行。VexFlow支持HTML5畫布和SVG。下面的分數可以在瀏覽器中呈現。

3.Voice Elements

Voice Elements是Web語音API的Web組件包裝器，它允許您使用聚合物進行語音識別和語音合成。語音識別是將口語翻譯成文本的過程。這是通過使用Web語音API的語音識別接口在瀏覽器中實現的。語言合成是語言文本轉化為語言的過程。這是通過使用Web語音API中的“語音合成”界面在瀏覽器中實現的。

4.annyang！語音識別

Annyang是一個很小的javascript庫，允許訪問者使用語音命令控制您的站點。Annyang沒有依賴項，重量小于1Kb，可以自由使用和修改。它可以很好地與所有瀏覽器一起使用，逐步增強支持語音識別的瀏覽器，同時不影響使用舊瀏覽器的用戶。

5.jPlayer

jPlayer是用javascript編寫的完全免費的開放源碼（gpl/mit）媒體庫。jquery插件jplayer允許您快速地將跨平臺音頻和視頻編織到網頁中。jPlayer的全面API允許您創建創新的媒體解決方案，而JPlayer的活躍和發展的社區提供支持和鼓勵。

6.Buzz

Buzz是一個小型但功能強大的JavaScript庫，允許您輕松利用新的HTML5音頻元素。它提供了大量利用音頻元素的方法，并提供了一種組合聲音的方法，并提供了許多控制聲音的方法。它在非現代瀏覽器上有著優雅的退化。

7.SoundJS

SoundJS是一個庫，可以使在Web上使用音頻更容易。它為在不同瀏覽器中播放音頻提供了一致的API，包括使用目標插件模型提供一種簡單的方法來提供額外的音頻插件（如Web音頻）和Flash回退。提供了一種機制，可以輕松地將音頻預加載綁定到預加載JS。

（本文如有侵權，請聯系作者，必刪！?。。?/p>

如果您知道最近發布的其他網頁上操作音頻的工具和庫，請在下面發表評論，讓我們知道，我們希望將它們添加到我們的列表中。

在線咨詢

上一篇：軟件測試學習筆記丨HTML基礎知識
下一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用HTML5+JS實現文字轉語音

原來動畫和語音結合起來才是最佳的用戶體驗。

事情的真相就是簡單如此，短短兩行，就實現了語音播報。

既然瀏覽器已經普遍支持了，那么我們不妨打印出來看看。