使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服、店小二功能,语音聊天成为了必不可少的方式。
但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用的工作,其实不然,随着HtML5的发展,语音功能也渐渐成为前端必会的功能之一。
为什么要学会HTML5 的语音呢?
1.Html5 规范推进,手机的更新加速了操作系统更新,语音功能将会变成前端主要的工作之一,就像现在的canvas一样。前端实现语音功能开发速度更快,更节省人力(这意味着给老板省钱,给老板省钱就是在给自己涨工资)
2.即使是现在本地应用做语音功能,熟悉前端语音交互的各种坑能够让你们的同事关系更和谐,协作更顺畅,而不是互相掐架。
3.了解新的技术可以预防面试,二来可以预判技术潮流,不至于学了一堆屠龙之技或者墨守成规,更有利于让自己的知识和职业核心竞争力一直处在食物链的顶端。
4.前端大部分人对语音功能有误解,以为语音功能就是HTML5 audio标签而已,事实上真的不是那么简单的"而已"
不墨迹那么多,咱们直接开发一个小项目啥都明明白儿白儿了,先看效果图
clipboard.png
业务逻辑非常简单,
跟我们微信用法一模一样,手按下去字变成松开结束,同时说话被录下来,松手的时候,变成按下结束,同时发送语音给对方
我们一步一步一步来,首先我们先整一个html页面
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, inITial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=Edge"> title> 微信语音/title> link rel="stylesheet" href="css/record.css"> /head> body> div id="wrap"> header id="header"> div id="left"> i class="MATErial-icons"> chevron_left /i> 微信(184) /div> div id="mid"> 艾达·王/div> div id="right"> i class="material-icons"> more_horiz /i> /div> /header> div id="contentWrap"> ul id="chatList"> li class="item_me"> div class="chatContent"> 我是不是你最疼爱的人? span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 奔跑吧,兄弟!(滚犊子) span class="bot"> /span> span class="top"> /span> /div> /li> li class="item_me"> div class="chatContent"> 这里我就不多说了,上来就是一梭子代码…… span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 大彬哥,你说你咋这么优秀呢?看见你我有一种大海的感觉 span class="bot"> /span> span class="top"> /span> /div> /li> li class="item_me"> div class="chatContent"> 老妹儿,你是不是喜欢上我了呢…… span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 不是,我晕船,看见你想吐…… span class="bot"> /span> span class="top"> /span> /div> /li> /ul> /div> footer id="footer"> div id="keyboard"> i class="material-icons"> keyboard /i> /div> div id="sayBTn"> span id="sendBtn" class="sendBtn"> 按下 说话/span> /div> div id="icon"> i class="material-icons"> sentiment_satisfied /i> /div> div id="add"> i class="material-icons"> add_circle_outline /i> /div> /footer> /div> /body> /html>
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部分。
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title> 微信语音/title> link rel="stylesheet" href="css/record.css"> script> 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 = ` div class = "redDot"> /div> div class="chatContent"> i class="material-icons material-icons_wifi"> wifi/i> span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> `; 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); /script> /head> body> div id="wrap"> header id="header"> div id="left"> i class="material-icons"> chevron_left /i> 微信(184) /div> div id="mid"> 艾达·王/div> div id="right"> i class="material-icons"> more_horiz /i> /div> /header> div id="contentWrap"> ul id="chatList"> li class="item_me"> div class="chatContent"> 我是不是你最疼爱的人? span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 奔跑吧,兄弟!(滚犊子) span class="bot"> /span> span class="top"> /span> /div> /li> li class="item_me"> div class="chatContent"> 这里我就不多说了,上来就是一梭子代码…… span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 大彬哥,你说你咋这么优秀呢?看见你我有一种大海的感觉 span class="bot"> /span> span class="top"> /span> /div> /li> li class="item_me"> div class="chatContent"> 老妹儿,你是不是喜欢上我了呢…… span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> /li> li class="item_you"> div class="avatar"> img src="images/ava2.jpg" alt=""> /div> div class="chatContent"> 不是,我晕船,看见你想吐…… span class="bot"> /span> span class="top"> /span> /div> /li> /ul> /div> footer id="footer"> div id="keyboard"> i class="material-icons"> keyboard /i> /div> div id="sayBtn"> span id="sendBtn" class="sendBtn"> 按下 说话/span> /div> div id="icon"> i class="material-icons"> sentiment_satisfied /i> /div> div id="add"> i class="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 } ) // 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 = ` div class = "redDot"> /div> div class="chatContent"> i class="material-icons material-icons_wifi"> wifi/i> span class="bot"> /span> span class="top"> /span> /div> div class="avatar"> img src="images/ava1.png" alt=""> /div> `; 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大规模使用才几年?),机会留给有准备的人。
整个项目细节和要注意的点还是很多的,希望大家真正自己敲一遍,因为你看懂了我的文章跟你会用这个技术两码事,祝大家在前端的路上越走越远(记得常回来看看^_^)。
总结
以上所述是小编给大家介绍的使用Html5多媒体实现微信语音功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!@H_660_126@如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 使用Html5多媒体实现微信语音功能
本文地址: https://pptw.com/jishu/585968.html