<

使用Html5 多媒体实现微信语音功能

img

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

img

 

业务逻辑非常简单,

 

我们一步一步一步来,首先我们先整一个html页面

 

css部分,

这里我说两个注意点,

 

1.html部分

 

2.css部分:使用flex布局。我只是为了讲解Html5功能,所以flex并没有写兼容性写法,另外App头部部分写法大家注意一下,那里是非常常用的。

 

下面说重点js部分。

这里实现的录影功能要注意的点很多,我们一个个说,

 

第一个东西,

 

当大家看一些html5关于录音的接口的时候,你看到这个

 

就要小心了,这个是老规范的东西了,被废了,新的是

 

html5 多媒体里面的语音这块换了好几茬规范,很乱,有些标签甚至一个浏览器都没实现过,未曾绽放就枯萎了,你也不用关心也没必要浪费那个时间知道,你只要知道我说这些就够了,因为你知道那些被废掉的过往没啥用,有那个时间还不如来一局LOL或者王者荣耀(虽然我并不懂二者的区别,不过这两个游戏应该都挺好玩吧)。

 

里面的东西大家也不需要看懂,什么promise了,什么媒体流了,你不用知道,你就知道这样一件事就行了,

 

上面的代码就相当于打开了水龙头(或者说按下的录音机的录音键),那么我们得有东西接着水啊,我们可以用电饭锅(录音机的话就是磁带)放水龙头下面看着它往里面射,如下代码

 

接下来就是,一按按钮就生米煮成熟饭了,对应录音机就是录完了按按钮就播放了,但是在我们程序里面要想播放你不仅要有磁带,还得有录音机,录音机就是audio标签,没有好办,我们new一个。这个世界上没有什么对象是程序员不敢new的,new一个不行,就new两个。剩下的代码除了吓人之外,没啥缺点,简单的令人发指。

 

其实就是录好了就播。

OK,是不是很简单 ,整个项目我说几个点吧:

 

  1. 切图结构合理是你后面做功能的前提,结构做的好,后面就省事,想想诸葛亮吧,未出茅庐人家就把html5结构搭好了,有三个section.

     

  2. 原生js和ES6的基础打牢可以为你提供不同的思路,比如我这里就使用了事件委托,还有ES6模板引擎。尤其是事件委托,不用的话查找节点很麻烦,另外代码套来套去也容易乱。

     

  3. 新的 知识和技术其实并不复杂,其实很简单,你想如果新技术不是为了让功能更好实现,更能解决我们的问题,那开发新技术干嘛?因为那帮大胡子的大牛们没事干怕被领导说工作量不饱和?技术是为了解决问题和让我们生活更美好服务的。

     

  4. 这个项目IOS 11以下跑不通,因为IOS 11.2之前不支持这个方法,需要IOS本地应用开发人员给你提供支援,但是在android下面是很OK的。而且可以预见,再过几年IOS 原生也不用给你支援都支持了,那你开发效率得多高。不要以为这些技术很遥远,html5真正商用也不过15年左右(vue 、react、angular大规模使用才几年?),机会留给有准备的人。

 

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