本篇内容介绍了“Html5怎么实现微信语音功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

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

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

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

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

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

首先我们先整一个html页面：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>微信语音</title><linkrel="stylesheet"href="css/record.css"></head><body><divid="wrap"><headerid="header"><divid="left"><iclass="material-icons">chevron_left</i>微信(184)</div><divid="mid">艾达·王</div><divid="right"><iclass="material-icons">more_horiz</i></div></header><divid="contentWrap"><ulid="chatList"><liclass="item_me"><divclass="chatContent">我是不是你最疼爱的人?<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">奔跑吧，兄弟！（滚犊子）<spanclass="bot"></span><spanclass="top"></span></div></li><liclass="item_me"><divclass="chatContent">这里我就不多说了，上来就是一梭子代码……<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉<spanclass="bot"></span><spanclass="top"></span></div></li><liclass="item_me"><divclass="chatContent">老妹儿，你是不是喜欢上我了呢……<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">不是，我晕船，看见你想吐……<spanclass="bot"></span><spanclass="top"></span></div></li></ul></div><footerid="footer"><divid="keyboard"><iclass="material-icons">keyboard</i></div><divid="sayBtn"><spanid="sendBtn"class="sendBtn">按下说话</span></div><divid="icon"><iclass="material-icons">sentiment_satisfied</i></div><divid="add"><iclass="material-icons">add_circle_outline</i></div></footer></div></body></html>

css部分：

*{margin:0;padding:0;}ulli{list-style:none;}html,body{height:100%;width:100%;overflow:hidden;}body{background:#ebebeb;}@font-face{font-family:'MaterialIcons';font-style:normal;font-weight:400;src:url(../css/iconfont/MaterialIcons-Regular.eot);/*ForIE6-8*/src:local('MaterialIcons'),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:'MaterialIcons';font-weight:normal;font-style:normal;font-size:32px;/*Preferrediconsize*/display:inline-block;/*line-height:0.01rem;*/text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;/*SupportforallWebKitbrowsers.*/-webkit-font-smoothing:antialiased;/*SupportforSafariandChrome.*/text-rendering:optimizeLegibility;/*SupportforFirefox.*/-moz-osx-font-smoothing:grayscale;/*SupportforIE.*/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#righti{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;}.avatarimg{width:100%;}.item_me.chatContent{padding:10px;background:#a0e75a;border:1pxsolid#6fb44d;margin-right:15px;border-radius:5px;position:relative;}.chatContentspan{width:0;height:0;font-size:0;overflow:hidden;position:absolute;}.item_me.chatContentspan.bot{border-width:8px;border-style:soliddasheddashed;border-color:transparenttransparenttransparent#6fb44d;right:-17px;top:10px;}.item_me.chatContentspan.top{border-width:8px;border-style:soliddasheddashed;border-color:transparenttransparenttransparent#a0e75a;right:-15px;top:10px;}.item_you.chatContent{padding:10px;background:#a0e75a;border:1pxsolid#6fb44d;margin-left:15px;border-radius:5px;position:relative;}.item_you.chatContentspan.bot{border-width:8px;border-style:soliddasheddashed;border-color:transparent#6fb44dtransparenttransparent;left:-17px;top:10px;}.item_you.chatContentspan.top{border-width:8px;border-style:soliddasheddashed;border-color:transparent#a0e75atransparenttransparent;left:-15px;top:10px;}#footer{height:46px;padding:04px;background:#f4f5f6;border-top:1pxsolid#d7d7d8;display:flex;align-items:center;color:#7f8389;justify-content:space-around;}#sayBtn{flex:1;display:flex;margin:05px;color:#565656;font-weight:bold;}.sendBtn{display:block;flex:1;padding:8px;background:#f4f5f6;border:1pxsolid#bec2c1;border-radius:5px;text-align:center;}.activeBtn{display:block;flex:1;padding:8px;background:#c6c7ca;border:1pxsolid#bec2c1;border-radius:5px;text-align:center;}.item_audio.chatContent{padding:6px;background:#fff;border:1pxsolid#999;border-radius:5px;margin-right:15px;position:relative;width:120px;min-height:20px;}.item_audio.chatContentspan.bot{border-width:8px;border-style:soliddasheddashed;border-color:transparenttransparenttransparent#999;right:-17px;top:10px;}.item_audio.chatContentspan.top{border-width:8px;border-style:soliddasheddashed;border-color:transparenttransparenttransparent#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部分。

<!DOCTYPhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>微信语音</title><linkrel="stylesheet"href="css/record.css"><script>document.addEventListener('DOMContentLoaded',function(){varoSendBtn=document.getElementById('sendBtn');varsoundClips=document.querySelector('.sound-clips');varmediaRecorder;varoChatList=document.getElementById('chatList');navigator.getUserMedia=(navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){navigator.mediaDevices.getUserMedia(//constraints-onlyaudioneededforthisapp{audio:true})//Successcallback.then(function(stream){rec(stream);})//Errorcallback.catch(function(err){});}else{}functionrec(stream){mediaRecorder=newMediaRecorder(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){varclipContainer=document.createElement('li');varaudio=document.createElement('audio');clipContainer.classList.add('item_audio');clipContainer.innerHTML=`<divclass="redDot"></div><divclass="chatContent"><iclass="material-iconsmaterial-icons_wifi">wifi</i><spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div>`;audio.setAttribute('controls','');oChatList.appendChild(clipContainer);varaudioURL=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);</script></head><body><divid="wrap"><headerid="header"><divid="left"><iclass="material-icons">chevron_left</i>微信(184)</div><divid="mid">艾达·王</div><divid="right"><iclass="material-icons">more_horiz</i></div></header><divid="contentWrap"><ulid="chatList"><liclass="item_me"><divclass="chatContent">我是不是你最疼爱的人?<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">奔跑吧，兄弟！（滚犊子）<spanclass="bot"></span><spanclass="top"></span></div></li><liclass="item_me"><divclass="chatContent">这里我就不多说了，上来就是一梭子代码……<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉<spanclass="bot"></span><spanclass="top"></span></div></li><liclass="item_me"><divclass="chatContent">老妹儿，你是不是喜欢上我了呢……<spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div></li><liclass="item_you"><divclass="avatar"><imgsrc="images/ava2.jpg"alt=""></div><divclass="chatContent">不是，我晕船，看见你想吐……<spanclass="bot"></span><spanclass="top"></span></div></li></ul></div><footerid="footer"><divid="keyboard"><iclass="material-icons">keyboard</i></div><divid="sayBtn"><spanid="sendBtn"class="sendBtn">按下说话</span></div><divid="icon"><iclass="material-icons">sentiment_satisfied</i></div><divid="add"><iclass="material-icons">add_circle_outline</i></div></footer></div></body></html>

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

第一个东西，

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){navigator.mediaDevices.getUserMedia({audio:true})//Successcallback.then(function(stream){rec(stream);})//Errorcallback.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){varclipContainer=document.createElement('li');varaudio=document.createElement('audio');clipContainer.classList.add('item_audio');clipContainer.innerHTML=`<divclass="redDot"></div><divclass="chatContent"><iclass="material-iconsmaterial-icons_wifi">wifi</i><spanclass="bot"></span><spanclass="top"></span></div><divclass="avatar"><imgsrc="images/ava1.png"alt=""></div>`;audio.setAttribute('controls','');oChatList.appendChild(clipContainer);varaudioURL=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);};

“Html5怎么实现微信语音功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！