html5语音框架,使用Html5多媒体实现微信语音功能

随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。

但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，随着Html5的发展，语音功能也渐渐成为前端必会的功能之一。

为什么要学会HTML5 的语音呢？

1.Html5 规范推进，手机的更新加速了操作系统更新，语音功能将会变成前端主要的工作之一，就像现在的canvas一样。前端实现语音功能开发速度更快，更节省人力(这意味着给老板省钱，给老板省钱就是在给自己涨工资)

2.即使是现在本地应用做语音功能，熟悉前端语音交互的各种坑能够让你们的同事关系更和谐，协作更顺畅，而不是互相掐架。

3.了解新的技术可以预防面试，二来可以预判技术潮流，不至于学了一堆屠龙之技或者墨守成规，更有利于让自己的知识和职业核心竞争力一直处在食物链的顶端。

4.前端大部分人对语音功能有误解，以为语音功能就是HTML5 audio标签而已，事实上真的不是那么简单的"而已"

不墨迹那么多，咱们直接开发一个小项目啥都明明白儿白儿了，先看效果图

业务逻辑非常简单，

跟我们微信用法一模一样，手按下去字变成松开结束，同时说话被录下来，松手的时候，变成按下结束，同时发送语音给对方

我们一步一步一步来，首先我们先整一个html页面

微信语音

chevron_left

微信(184)

艾达·王

more_horiz

• 我是不是你最疼爱的人?

  

• 

  奔跑吧，兄弟！(滚犊子)
• 这里我就不多说了，上来就是一梭子代码……

  

• 

  大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉
• 老妹儿，你是不是喜欢上我了呢……

  

• 

  不是，我晕船，看见你想吐……

keyboard

按下 说话

sentiment_satisfied

add_circle_outline

css部分，

*{

margin: 0;

padding: 0;

}

ul li{ list-style: none;}

html,body{

height: 100%;

width: 100%;

overflow: hidden;

}

body{

background: #ebebeb;

}

@font-face {

font-family: 'Material Icons';

font-style: normal;

font-weight: 400;

src: url(../css/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */

src: local('Material Icons'),

local('MaterialIcons-Regular'),

url(../css/iconfont/MaterialIcons-Regular.woff) format('woff2'),

url(../css/iconfont/MaterialIcons-Regular.woff2) format('woff'),

url(../css/iconfont/MaterialIcons-Regular.ttf) format('truetype');

}

.material-icons {

font-family: 'Material Icons';

font-weight: normal;

font-style: normal;

font-size: 32px; /* Preferred icon size */

display: inline-block;

/* line-height: 0.01rem; */

text-transform: none;

letter-spacing: normal;

word-wrap: normal;

white-space: nowrap;

direction: ltr;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;

/* Support for Safari and Chrome. */

text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

font-feature-settings: 'liga';

}

#wrap{

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

#header{

height: 46px;

line-height: 46px;

background: #363539;

display: flex;

align-items: center;

color: #fff;

justify-content: space-between;

}

#header #left{

display: flex;

align-items: center;

font-size: 14px;

width: 100px;

}

#header #right{

display: flex;

align-items: center;

width: 100px;

justify-content: flex-end;

}

#header #right i{

padding-right: 6px;

}

#header #mid{

text-align: center;

flex: 1;

}

#contentWrap{

flex: 1;

overflow-y:auto;

}

.item_me,.item_audio{

display: flex;

align-items: flex-start;

justify-content:flex-end;

padding: 8px;

}

.item_you{

display: flex;

align-items: flex-start;

justify-content:flex-start;

padding: 8px;

}

.avatar{

width: 40px;

height: 40px;

}

.avatar img{width: 100%;}

.item_me .chatContent{

padding: 10px;

background: #a0e75a;

border: 1px solid #6fb44d;

margin-right: 15px;

border-radius: 5px;

position: relative;

}

.chatContent span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.item_me .chatContent span.bot{

border-width:8px;

border-style:solid dashed dashed;

border-color: transparent transparent transparent #6fb44d;

right:-17px;

top:10px;

}

.item_me .chatContent span.top{

border-width:8px;

border-style:solid dashed dashed;

border-color:transparent transparent transparent #a0e75a ;

right:-15px;

top:10px;

}

.item_you .chatContent{

padding: 10px;

background: #a0e75a;

border: 1px solid #6fb44d;

margin-left: 15px;

border-radius: 5px;

position: relative;

}

.item_you .chatContent span.bot{

border-width:8px;

border-style:solid dashed dashed;

border-color: transparent #6fb44d transparent transparent ;

left:-17px;

top:10px;

}

.item_you .chatContent span.top{

border-width:8px;

border-style:solid dashed dashed;

border-color:transparent #a0e75a transparent transparent ;

left:-15px;

top:10px;

}

#footer{

height: 46px;

padding: 0 4px;

background: #f4f5f6;

border-top: 1px solid #d7d7d8;

display: flex;

align-items: center;

color: #7f8389;

justify-content: space-around;

}

#sayBtn{

flex: 1;

display: flex;

margin: 0 5px;

color:#565656;

font-weight: bold;

}

.sendBtn{

display: block;

flex: 1;

padding: 8px;

background: #f4f5f6;

border:1px solid #bec2c1;

border-radius: 5px;

text-align: center;

}

.activeBtn{

display: block;

flex: 1;

padding: 8px;

background: #c6c7ca;

border:1px solid #bec2c1;

border-radius: 5px;

text-align: center;

}

.item_audio .chatContent{

padding: 6px;

background: #fff;

border: 1px solid #999;

border-radius: 5px;

margin-right: 15px;

position: relative;

width:120px;

min-height: 20px;

}

.item_audio .chatContent span.bot{

border-width:8px;

border-style:solid dashed dashed;

border-color: transparent transparent transparent #999;

right:-17px;

top:10px;

}

.item_audio .chatContent span.top{

border-width:8px;

border-style:solid dashed dashed;

border-color:transparent transparent transparent #fff ;

right:-15px;

top:10px;

}

.material-icons_wifi{

transform: rotate(90deg);

color: #a5a5a5;

font-size: 22px;

}

.redDot{

background: #f45454;

border-radius: 50%;

width: 8px;

height: 8px;

margin-right: 10px;

}

这里我说两个注意点，

1.html部分：

图省事我并没有像素级切图，图省事我也直接用了svg图标，具体库我使用的是

https://material.io/tools/icons/?style=outline

2.css部分：使用flex布局。我只是为了讲解Html5功能，所以flex并没有写兼容性写法，另外App头部部分写法大家注意一下，那里是非常常用的。

下面说重点js部分。

微信语音

document.addEventListener('DOMContentLoaded', function () {

var oSendBtn = document.getElementById('sendBtn');

var soundClips = document.querySelector('.sound-clips');

var mediaRecorder;

var oChatList = document.getElementById('chatList');

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

navigator.mediaDevices.getUserMedia(

// constraints - only audio needed for this app

{

audio: true

})

// Success callback

.then(function (stream) {

rec(stream);

})

// Error callback

.catch(function (err) {

}

);

} else {

}

function rec(stream) {

mediaRecorder = new MediaRecorder(stream);

oSendBtn.addEventListener('touchstart', function (ev) {

ev.preventDefault();

this.innerHTML = '松开 结束';

this.classList.add('activeBtn');

mediaRecorder.start();

}, false);

oSendBtn.addEventListener('touchend', function (ev) {

ev.preventDefault();

this.innerHTML = '按下 说话';

this.classList.remove('activeBtn');

mediaRecorder.stop();

}, false);

mediaRecorder.ondataavailable = function (e) {

var clipContainer = document.createElement('li');

var audio = document.createElement('audio');

clipContainer.classList.add('item_audio');

clipContainer.innerHTML = `

wifi

`;

audio.setAttribute('controls', '');

oChatList.appendChild(clipContainer);

var audioURL = window.URL.createObjectURL(e.data);

audio.src = audioURL;

oChatList.addEventListener('touchstart', function (ev) {

if (ev.srcElement.parentNode.className!== 'item_audio') return;

audio.play();

ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])

}, false);

};

}

}, false);

chevron_left

微信(184)

艾达·王

more_horiz

• 我是不是你最疼爱的人?

  

• 

  奔跑吧，兄弟！(滚犊子)
• 这里我就不多说了，上来就是一梭子代码……

  

• 

  大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉
• 老妹儿，你是不是喜欢上我了呢……

  

• 

  不是，我晕船，看见你想吐……

keyboard

按下 说话

sentiment_satisfied

add_circle_outline

这里实现的录影功能要注意的点很多，我们一个个说，

第一个东西，

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

navigator.mediaDevices.getUserMedia(

{

audio: true

})

// Success callback

.then(function (stream) {

rec(stream);

})

// Error callback

.catch(function (err) {

}

);

} else {

}

当大家看一些html5关于录音的接口的时候，你看到这个

Navigator.getUserMedia()

就要小心了，这个是老规范的东西了，被废了，新的是

navigator.mediaDevices.getUserMedia

html5 多媒体里面的语音这块换了好几茬规范，很乱，有些标签甚至一个浏览器都没实现过，未曾绽放就枯萎了，你也不用关心也没必要浪费那个时间知道，你只要知道我说这些就够了，因为你知道那些被废掉的过往没啥用，有那个时间还不如来一局LOL或者王者荣耀(虽然我并不懂二者的区别，不过这两个游戏应该都挺好玩吧，没玩过不懂)。

里面的东西大家也不需要看懂，什么promise了，什么媒体流了，你不用知道，你就知道这样一件事就行了，

上面的代码就相当于打开了水龙头(或者说按下的录音机的录音键)，那么我们得有东西接着水啊，我们可以用电饭锅(录音机的话就是磁带)放水龙头下面看着它往里面ci(我们老家话，射的意思)，如下代码

mediaRecorder = new MediaRecorder(stream);

接下来就是，一按按钮就生米煮成熟饭了，对应录音机就是录完了按按钮就播放了，但是在我们程序里面要想播放你不仅要有磁带，还得有录音机，录音机就是audio标签，没有好办，我们new一个。这个世界上没有什么对象是程序员不敢new的，new一个不行，就new两个。剩下的代码除了吓人之外，没啥缺点，简单的令人发指。

mediaRecorder.ondataavailable = function (e) {

var clipContainer = document.createElement('li');

var audio = document.createElement('audio');

clipContainer.classList.add('item_audio');

clipContainer.innerHTML = `

wifi

`;

audio.setAttribute('controls', '');

oChatList.appendChild(clipContainer);

var audioURL = window.URL.createObjectURL(e.data);

audio.src = audioURL;

oChatList.addEventListener('touchstart', function (ev) {

if (ev.srcElement.parentNode.className!== 'item_audio') return;

audio.play();

ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])

}, false);

};

其实就是录好了就播。

OK，是不是很简单 ，整个项目我说几个点吧：

1.切图结构合理是你后面做功能的前提，结构做的好，后面就省事，想想诸葛不亮吧，未出茅庐人家就把html5结构搭好了，有三个section.

2.原生js和ES6的基础打牢可以为你提供不同的思路，比如我这里就使用了事件委托，还有ES6模板引擎。尤其是事件委托，不用的话查找节点很麻烦，另外代码套来套去也容易乱。

3.新的 知识和技术其实并不复杂，其实很简单，你想如果新技术不是为了让功能更好实现，更能解决我们的问题，那开发新技术干嘛？因为那帮大胡子的大牛们没事干怕被领导说工作量不饱和？技术是为了解决问题和让我们生活更美好服务的。

4.这个项目IOS 11以下跑不通，因为IOS 11.2之前不支持这个方法，需要IOS本地应用开发人员给你提供支援，但是在android下面是很OK的。而且可以预见，再过几年IOS 原生也不用给你支援都支持了，那你开发效率得多高。不要以为这些技术很遥远，html5真正商用也不过15年左右(vue 、react、angular大规模使用才几年？)，机会留给有准备的人。

整个项目细节和要注意的点还是很多的，希望大家真正自己敲一遍，因为你看懂了我的文章跟你会用这个技术两码事，祝大家在前端的路上越走越远(记得常回来看看^_^)。