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'),