HTML5實時語音通話聊天，MP3壓縮傳輸3KB每秒

從Recorder H5 GitHub開源庫優化后，對邊錄邊轉碼成小語音片段文件實時上傳服務器這種操作支持非常良好，因此以前不太好支持的H5語音通話已經有了更好的突破空間。因此花了兩晚時間打造了一個H5語音通話聊天的demo。
歡迎在線把玩：https://xiangyuecn.github.io/Recorder/

一、把玩方法

準備局域網內兩臺設備(Peer A、Peer B)用最新版本瀏覽器(demo未適配低版本)分別打開demo頁面（也可以是同一瀏覽器打開兩個標簽）
勾選頁面中的H5版語音通話聊天，在Peer A中點擊新建連接
把Peer A的本機信手動復制傳輸給Peer B，粘貼到遠程信息中，并點擊確定連接
把Peer B自動生成的本機信息手動復制傳輸給Peer A，粘貼到遠程信息中，并點擊確定連接
雙方P2P連接已建立，使用頁面上方的錄音功能，隨時開啟錄音，音頻數據會實時發送給對方

局域網H5版對講機

二、技術特性

（1）數據傳輸

github demo中考慮到減少對服務器的依賴，因此采用了WebRTC P2P傳輸功能，無需任何服務器支持即可實現局域網內的兩個設備之間互相連接，連接代碼也算簡單。有服務器支持可能就要逆天了，不過代碼也會更復雜。

如果正式使用，可能不太會考慮使用WebRTC，用WebSocket通過服務器進行轉發可能是最佳的選擇。

WebRTC局域網P2P連接要點（實際代碼其實差不多，只不過多做了點兼容）：

/******Peer A(本機)******/
var peerA=new RTCPeerConnection(null,null)
//開啟會話，等待遠程連接
peerA.createOffer().then(function(offer){
 peerA.setLocalDescription(offer);
 peerAOffer=offer;
});
var peerAICEList=[......] //通過peerA.onicecandidate監聽獲得所有的ICE連接信息候選項，如果有多個網絡適配器，就會有多個候選
//創建連接通道對象，A端通過這個來進行數據發送
var peerAChannel=peerA.createDataChannel("RTC Test");
/******Peer B(遠程)******/
var peerB=new RTCPeerConnection(null,null)
//連接到Peer A
peerB.setRemoteDescription(peerAOffer);
//開啟應答會話，等待Peer A確認連接
peerB.createAnswer().then(function(answer){
 peerB.setLocalDescription(answer);
 peerBAnswer=answer;
});
//把Peer A的連接點都添加進去
peerB.addIceCandidate(......peerAICEList)
var peerBICEList=[......] //通過peerB.onicecandidate監聽獲得所有的ICE連接信息候選項，如果有多個網絡適配器，就會有多個候選
var peerBChannel=... //通過peerB.ondatachannel得到連接通道對象，B端通過這個來進行數據發送
/*******最終完成連接********/
//連接到Peer B
peerA.setRemoteDescription(peerBAnswer);
//把Peer B的連接點都添加進去
peerA.addIceCandidate(......peerBICEList)
/*
peerA peerB分別等待peerA/BChannel.onopen回調即完成P2P連接
，然后通過監聽peerA/BChannel.onmessage獲得對方發送的信息
，通過peerA/BChannel.send(data) 發送數據。
*/

（2）音頻采集和編碼

由于是在我的Recorder庫中新加的demo，因此音頻采集和編碼都是現成的，Recorder庫有好的兼容性和穩定性，因此節省了最大頭的工作量。

編碼最佳使用MP3格式，因為此格式已優化了實時編碼性能，可做到邊錄邊轉碼，16kbps 16khz的情況下可做到2kb每秒的文件大小，音質還可以，實時傳輸時為3kb每秒，15分鐘大概3M的流量。

用wav格式也可以，不過此格式編碼出來的數據量太大，16位 16khz接近50kb每秒的實時傳輸數據，15分鐘要37M多流量。其他格式由于暫未對實時編碼進行優化，使用中會導致明顯卡頓。

降噪、靜音檢測等高級功能是沒有的，畢竟是非專業人員要求高點可以，但不要超出范圍太多啦。

（3）音頻實時接收和播放

接收到一個音頻片段后，本應該是立即播放的，但由于編碼、網絡傳輸導致的延遲，可能上個片段還未播放完（甚至未開始播放），因此需要緩沖處理。

因為存在緩沖，就需要進行實時同步處理，如果緩沖內積壓了過多的音頻片段，會導致語音播放滯后太多，因此需要適當進行對數據進行丟棄，實測發現網絡正常、設備性能靠譜的情況下基本沒有丟棄的數據。

然后就是播放了，本應是播完一個就播下一個，測試發現這是不靠譜的。因為結束一個片段后再開始播放下一個發出聲音，這個過程會中斷比較長時間，明顯感覺得出來中間存在短暫停頓。因此必須在片段未播完時準備好下一個片段的播放，并且提前開始播放，達到抹掉中間的停頓。

我寫了兩個播放方式：

實時解碼播放
雙Audio輪換播放

最開始用一個Audio停頓感太明顯，因此用兩個Audio輪換抹掉中間的停頓，但發現不同格式Auido播放差異巨大，播放wav非常流暢，但播放mp3還是存在停頓（后面用解碼的發現是得到的PCM時長變長了，導致事件觸發會出現誤差，為什么會變長？怪異）。

因此后面寫了一個解碼然后再播放，mp3這次終于能正常連續播放了，wav格式和雙Audio的播放差異不大。實時解碼里面也用到了雙Audio中的技巧，其實也是用到了兩個BufferSource進行類似的輪換操作，以抹掉兩個片段間的停頓。

不過最終播放效果還是不夠好，音質變差了點，并且多了點噪音。如果有現成的播放代碼拿過來用就就好了。

三、應用場景

數據傳輸改成WebSocket，做個仿微信語音通話H5版還是可以的（受限于Recorder瀏覽器支持）
局域網H5版對講機（前端玩具）
......沒有想到

完。

用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功能，所以它們里面可選擇的語音是一樣的，一般都是有幾百種，這種方式轉換出來的語音，雖然聽起來有點機械，但是對應普通的視頻配音來說完全足夠了。

者：xmanlin

轉發鏈接：https://segmentfault.com/a/1190000022268377

在線咨詢

上一篇：HTML 屬性
下一篇：HTML常用布局標簽：提升網頁顏值！不可不知的HTML布局技巧全解析

您的項目需求

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

整合營銷服務商

HTML5實時語音通話聊天，MP3壓縮傳輸3KB每秒

一、把玩方法

二、技術特性

三、應用場景

您的項目需求