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

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

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

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

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

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

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

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

业务逻辑非常简单，


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

我们一步一步一步来，首先我们先整一个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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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部分。

<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="data: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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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="data:images/ava1.png" alt=""></div></li><li class="item_you"><div class="avatar"><img src="data: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="data: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大规模使用才几年？），机会留给有准备的人。

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

来源：https://segmentfault.com/a/1190000017308695

使用Html5多媒体实现微信语音功能相关推荐

  1. php微信聊天带语音,使用Html5多媒体实现微信语音功能

    随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...

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

    随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...

  3. vue 微信录音倒计时_vue的微信语音功能，录音+对接口返回amr音频播放-Go语言中文社区...

    vue的微信语音功能,录音+对接口返回amr音频播放 最近的新项目需要调用微信的录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西. 参考的GitHub仓库--Recorder ...

  4. html仿微信语音功能案例,html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图...

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  5. 仿微信语音功能的流程

    当我们要做一个仿微信的语音功能时,我们要想一想,微信的语音功能的效果是怎样的? 1.当我们按下录音按钮时,开始录音,显示一个正在录制的dialog 2.如果按下按钮,在很短的时间内松开手指,而没有录制 ...

  6. android qq语音按钮,Android 仿QQ/微信语音功能。

    简单仿照一个语音效果,效果图: 所以,首先先做一个Dialog用于展示我们说话的UI: VoiceDialogManager.java /** * 语音Dialog 管理器 * Created by ...

  7. itools3.0服务器维护,iTools3.0微信管理功能更新 可支持语音信息

    iTools3.0近日升级到了全新版本3.1.6.9,在这个全新版本里,微信管理功能有了突破性的更新,其加入了微信语音支持及微信名片.图片支持等功能,这使iTools3.0的微信管理功能在实用性上得到 ...

  8. 新型复读机——微信语音

    英语学习中一直找不到合适的复读机: 1.市面上的复读机总是需要好多功能去操作,虽然有点精确,有的不精确,但每次操作都要点击鼠标. 2.除此之外,学习时,好多音频是电脑播放的,当自己跟读时,用电脑录音不 ...

  9. Android 仿微信语音聊天音量大小显示控件

    某日用微信语音功能聊天,发现当我使用语音功能时,会弹出一个窗口,窗口中间有一个控件会实时的显示我说话声音的大小(即分贝).当时觉得挺好玩,决定也仿制一个,效果如下 分析控件显示效果,可判断左边是一个i ...

最新文章

  1. ds图—最小生成树_Java: Kruskal算法生成最小生成树(邻接矩阵)
  2. 怎么重写MDK（KEIL）Flash烧写程序
  3. 台湾大学林轩田机器学习技法课程学习笔记4 -- Soft-Margin Support Vector Machine
  4. 自动生成web服务器日志解析规则
  5. HTML5游戏引擎Egret发布2.0版 开发工具亦获更新
  6. mysql npe问题_MySQL为Null会导致5个问题，个个致命！
  7. VMware下CentOS6.8配置GFS文件系统
  8. php session 自定义的设置测试
  9. SPSS异常值处理（图文+数据集）【SPSS 010期】
  10. 弄一个html的登录页面,如何制作一个简单的HTML登录页面（附代码）
  11. react 实现tab切换 三角形筛选样式
  12. 《扫雷》游戏递归算法分析
  13. c语言画简谐振动图像,[求助] 实心小球沿正弦曲线运动
  14. tabindex的用法
  15. 学习 Rust Futures - Future 和 Stream
  16. 2022年京东图书总榜出炉
  17. pdf怎么转换成word文档呢?
  18. 嵌入式GUI分析详解
  19. OpenLayers之 OverLay问题汇总
  20. 寻找中国的乔布斯 第二届达内发现杯软件大赛决赛开启

热门文章

  1. 7-41 高空坠球（20 分）
  2. H5跳转小程序（详）
  3. 使用docker快速部署owncloud私有云存储服务
  4. “私厨”会代表新生活方式的到来吗？初创公司“爱大厨”就想派厨师上门为忙碌的人类做菜 | 36氪...
  5. 微信下载APP安卓手机弹出默认浏览器打开 苹果App Store苹果商店
  6. 电流和电压的产生原理
  7. 软件工程的图之数据流图，盒图
  8. 新概念二册 Lesson 26 The best art critics最佳艺术评论家 ( 宾语从句+一般现在时现在进行时宾语从句)
  9. Android中，字体大小自适应不同分辨率，以及注意事项
  10. 使用git拉取项目分支操作