踩坑之uniapp使用plus.audio

准备工作

什么是plus？

以plus开头的方法都是属于HTML5+环境调用的方法。

plus不能在浏览器环境下使用，它必须在手机APP上才能使用，因为以安卓为例，他是操纵webview的API。在5+中，我们在使用plus之前要监听HTML5+环境是否已经加载完毕，而在uniapp中，则可以直接调用，可以参看uni-app使用plus注意事项。

什么是webview？

WebView是android中一个非常重要的控件，它的作用是用来展示一个web页面。它使用的内核是webkit引擎，4.4版本之后，直接使用chrome作为内置网页浏览器。它的作用是显示和渲染页面，可与页面JavaScript加护，实现混合开发。

什么是HTML5+？

HTML5+是中国HTML5产业联盟的扩展规范，基于HTML5扩展了大量调用设备的能力，使得web语言可以像原生语言一样强大。

相关阅读：HTML5+ WebView API

开始

1.新建一个普通uniapp项目

参照创建普通uniapp项目，并在手机上调试

2.阅读HTML5+ WebView API文档中关于audio的部分

audio

audio包括2个常量，2个方法，5个对象和3个回调函数。

还不知道他们都是干什么用的，先调用打印出来看看是什么情况。

3.调用plus.audio

在工程的pages中有一个主页，先在主页中尝试调用plus.audio

pages=>index中的index.vue

uniapp的生命周期是在vue的基础上扩展的，可以参看vue生命周期，uniapp生命周期。

这里直接在onLoad()生命周期中写入代码，调用plus.audio，将其打印出来。

结果如下。

打开打印出来的Object，发现里面只有两个常量。

走到这里略显迷惑，不知道接下来直接调用实例化audio录音对象的方法对怎样。

4.调用audio的getRecorder()方法

直接使用文档中的例子

当然，例子是在原生HTML中调用，这里做一些在uniapp中调用的修改

html

在vue文件的template中写html部分，message用来传递信息，给用户反馈。另外，增加两个input作为调用开始录音、停止录音的控件。

onLoad

在onLoad生命周期中实例化一个recorder对象。

methods

在methods中写连个方法，startRecord和stopRecord，分别是开始录音和结束录音的方法，并与组件绑定。

点击运行，控制台出现如下，

手机真机调试出现如下，

可以点击开始录音，结束录音进行录音。

5.调用createPlayer方法

同样的，使用HTML5+ WebView API文档中的例子。

在methods中添加两个方法，startPlay和stopPlay，并将其与template中的组件绑定。

运行之后，点击Start Play可以播放，点击Stop Play可以结束播放。

结语

plus的功能还是很强大的，文档中可以看到几乎可以实现绝大多数的原生语言可以调用的硬件功能。

audio的recorder的默认存放目录是手机中app文件夹下面的doc，然后现在仅支持录制amr和3gp格式，但是player播放支持很多格式。