php微信聊天带语音,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服、店小二功能,语音聊天成为了必不可少的方式。
但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用的工作,其实不然,随着Html5的发展,语音功能也渐渐成为前端必会的功能之一。
为什么要学会HTML5 的语音呢?
1.Html5 规范推进,手机的更新加速了操作系统更新,语音功能将会变成前端主要的工作之一,就像现在的canvas一样。前端实现语音功能开发速度更快,更节省人力(这意味着给老板省钱,给老板省钱就是在给自己涨工资)
2.即使是现在本地应用做语音功能,熟悉前端语音交互的各种坑能够让你们的同事关系更和谐,协作更顺畅,而不是互相掐架。
3.了解新的技术可以预防面试,二来可以预判技术潮流,不至于学了一堆屠龙之技或者墨守成规,更有利于让自己的知识和职业核心竞争力一直处在食物链的顶端。
4.前端大部分人对语音功能有误解,以为语音功能就是HTML5 audio标签而已,事实上真的不是那么简单的"而已"
不墨迹那么多,咱们直接开发一个小项目啥都明明白儿白儿了,先看效果图
clipboard.png
业务逻辑非常简单,
跟我们微信用法一模一样,手按下去字变成松开结束,同时说话被录下来,松手的时候,变成按下结束,同时发送语音给对方
我们一步一步一步来,首先我们先整一个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图标,具体库我使用的是
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大规模使用才几年?),机会留给有准备的人。
整个项目细节和要注意的点还是很多的,希望大家真正自己敲一遍,因为你看懂了我的文章跟你会用这个技术两码事,祝大家在前端的路上越走越远(记得常回来看看^_^)。
总结
以上所述是小编给大家介绍的使用Html5多媒体实现微信语音功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
php微信聊天带语音,使用Html5多媒体实现微信语音功能相关推荐
- html5语音框架,使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式. 但是很多人感觉网页端语音离我们 ...
- 使用Html5多媒体实现微信语音功能
随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服.店小二功能,语音聊天成为了必不可少的方式.Azure AI 服务之语音识别 ...
- 微信聊天中上怎么用计算机,用电脑微信聊天会不会显示正在输入
不少微信用户在与自己的微信好友聊天的过程中,看到微信上方显示的输入状态是:对方正在输入,说明对方正在回复自己. 不过,这个微信状态也会给微信用户带来一些不便,比如:泄露自己在线的状态.那么,微信正在输 ...
- 一个可在微信聊天框中生成短链接的微信公众号
我们都知道腾讯.新浪的短网址功能并没有官方网站,很多时候我们想生成短链接需要去一些第三方网站,费时费力,有些还带广告或流量劫持! 所以做了这个功能,在聊天框中直接生成短链接,只需要发送网址,一秒内就会 ...
- html h5 php 语音录入,html5在输入框添加语音输入功能
[导读] 这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法.大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了其实很简单,语音识别是 ...
- 怎么调用微信自带的收货地址和我的地址功能页面。
在微信小程序里面调用这个功能页面其实很简单,直接在jS里面调用wx.chooseAddress({}): 详细说明请看官方文档说明:微信收货地址文档API
- 企业微信聊天工具栏怎么开启?如何调整位置?
企业微信作为一款聊天办公软件,聊天工具栏方便员工与客户聊天时快速查看客户信息.发送快捷回复等.企业微信聊天工具栏如何开启? 前言 企业微信作为一款移动办公软件,具有和微信一样的沟通体验,打开与客户的聊 ...
- 微信公号 DIY:一小时搭建微信聊天机器人
最近借用了女朋友的公号,感觉如果只是用来发文章,太浪费微信给提供的这些功能了.想了想,先从最简单的开始,做一个聊天机器人吧. 使用Python实现聊天机器人的方案有多种:AIML.chatterBot ...
- Swift - 自定义单元格实现微信聊天界面
1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...
最新文章
- 神奇的输入 while(cin....)如何在遇见换行之后进入下一层循环读入
- python代码找到链表的倒数第K个节点并打印
- Struts2, jquery, select二级联动
- input子系统分析(转)
- GROUP BY 和 ORDER BY 同时使用问题
- linux系统服务详解 用于Linux系统服务优化
- 打开mysql的远程连接_开启mysql的远程访问权限
- android 搭建短信平台,Android 短信SDK集成文档 | Mob文档中心
- PetShop4.0的安装、设置、调试与体验(草稿)
- np.vstack与np.newaxis的含义
- DE22 Using Laplace Transform to Solve ODEs with Discontinuous Inputs
- http://t.cn/xx 等链接的生成与还原
- Unity3D基础8:C#脚本
- C#3.0学习(2)---对象集合初始化器
- 字符串函数---atof()函数详解及实现
- java版本位数_java 如何查看jdk版本位数
- 在xp系统上安装java8
- 计算机ppt以学校生活为主题的作文,以校园生活为话题的作文
- 使用Teamviewer实现远程控制安卓设备的实现过程记录
- 174款前端开发工具汇总,学习,开发,事半功倍!
热门文章
- 计算机硬盘对考,台式机怎样让进行硬盘对拷(快速批量装机) 台式机让进行硬盘对拷(快速批量装机)的方法...
- 什么都学一点系列之鸿蒙开发Java版简易备忘录
- [死磕 Spring 21/43] --- IOC 之 Factory 实例化 bean
- Spring源码之启动过程(四)—— Bean的实例化详解
- matlab直观数据处理,霍尔效应实验的MATLAB数据处理
- php正则表达式后向引用和贪婪模式
- 每日写题分享--包含min函数的栈/双栈实现
- HeadPose Estimation头部姿态估计头部朝向(Android)
- 小马哥---高仿苹果6 R7226刷机拆机主板图与开机识别图 修改WiFi信号增强
- 高效并发unsafe-星耀