使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起，语音聊天成为不少App必备功能，大到将语音聊天做为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。css
可是不少人感受网页端语音离咱们很遥远，这些更可能是本地应用的工做，其实否则，随着Html5的发展，语音功能也渐渐成为前端必会的功能之一。html
为何要学会HTML5 的语音呢？前端
1.Html5 规范推动，手机的更新加速了操做系统更新，语音功能将会变成前端主要的工做之一，就像如今的canvas同样。前端实现语音功能开发速度更快，更节省人力（这意味着给老板省钱，给老板省钱就是在给本身涨工资）vue
2.即便是如今本地应用作语音功能，熟悉前端语音交互的各类坑可以让大家的同事关系更和谐，协做更顺畅，而不是互相掐架。html5
3.了解新的技术能够预防面试，二来能够预判技术潮流，不至于学了一堆屠龙之技或者墨守成规，更有利于让本身的知识和职业核心竞争力一直处在食物链的顶端。react
4.前端大部分人对语音功能有误解，觉得语音功能就是HTML5 audio标签而已，事实上真的不是那么简单的"而已"android
不墨迹那么多，我们直接开发一个小项目啥都明明白儿白儿了，先看效果图程序员
业务逻辑很是简单，web
跟咱们微信用法如出一辙，手按下去字变成松开结束，同时说话被录下来，松手的时候，变成按下结束，同时发送语音给对方
咱们一步一步一步来，首先咱们先整一个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大规模使用才几年？），机会留给有准备的人。
整个项目细节和要注意的点仍是不少的，但愿你们真正本身敲一遍，由于你看懂了个人文章跟你会用这个技术两码事，祝你们在前端的路上越走越远（记得常回来看看^_^）。
相关文章
- 1. 【HTML5】使用多媒体
- 2. HTML5多媒体功能之video标签
- 3. HTML5——多媒体：audio音频、video视频
- 4. 【HTML5】------- JavaScript 实现网页版HTML5发送语音功能
- 5. （3）HTML5-多媒体应用
- 6. js实现语音功能
- 7. c#实现语音功能
- 8. HTML5 之多媒体
- 9. Android 仿微信实现语音聊天功能
- 10. c# HTML5 Blob对象实现媒体播放功能
- 更多相关文章...
- • 使用Redis和Lua的原子性实现抢红包功能 - 红包项目实战
- • DTD - 实体 - DTD 教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
欢迎关注本站公众号,获取更多信息
