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

在线咨询

上一篇：大气网页-深浅湛蓝-总结报告PPT模板，新的尝试
下一篇：HTML5动画原理和HTML5动画制作工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5实时语音通话聊天，MP3压缩传输3KB每秒

一、把玩方法

二、技术特性

三、应用场景

您的项目需求