手记

cordova-plugin-media 录音并打包上传

一、录音.

插件:cordova-plugin-media

官网中的示例代码很详细了,src可以为"cdvfile://localhost/persistent/"的形式,但我未能测试通过,因此采用“name.wav”

src: recordFileName = “name.wav” 

src的name命名有限制,在小米和华为测试中发现:不能有‘/’,否则文件无法播放,不能有“:”,否则文件无法读取。

示例代码

用cordova media插件进行录音

存储地址:

需要依赖cordvoa-plugin-file 插件,如果直接存为 “name.wav” 那么安卓会存储在根目录下"<sdcard>/ ",对应插件中的cordova.file.externalRootDirectory,小米4需重启才能在手机中看到该文件。

二、读取文件

已有的方法为利用 H5 的 FileReader.readAsDataUrl() 方法,但是文件只能由用户拖拽或选择路径,详情可参看参考文献。

本项目要求上传给定路径的文件,选择cordova的插件 cordova-plugin-file 来读取文件

Android 读取录音文件代码

Android音频文件“name.wav”的读取

录音文件在Android的地址是"<sdcard>/", 这点我使出浑身解数也没在网上找到答案,还是做Android的前辈指点所得,深表感谢。根据cordova-plugin-file官网中对应的Layout(https://github.com/apache/cordova-plugin-file#android-file-system-layout)可知,resolveLocalFileSystemURL的第一个参数应该是cordova.file.externalRootDirectory

iOS 读取录音文件代码:

iOS音频文件“name.wav”的读取

cordova-plugin-media 的官网指定了src为“name.wav”时,录音文件在iOS的存贮地址,可采用 window.requestFileSystem 方法读取window.TEMPORARY文件系统,获得的dirEntry对象的root值,即为文件所在目录。

转beas64

读取的文件流就是base64格式的,所以不存在转base64的问题。iOS中data的格式是audio/wav。

Android读取的文件数据

三、打包上传

本项目要求一次上传所有需要的音频文件,而cordova-plugin-file-transfer插件一次只能上传单个文件,因此需要生成zip文件,选取jszip插件来进行打包

四、删除文件

如需删除手机本地文件,可获取文件入口fileEntry后调用其remove方法

删除本地文件

五、iOS的问题

1.文件太大

    由于这个插件在iOS只能录wav格式的音频,文件体积非常大,大概3分钟15M。这造成两个问题,一是上传太大,后台可能设限制。二是文件读取到手机内存中,会引起内存不足而强制退出app。

该问题已解决:

采用封装过的插件 https://github.com/remoorejr/cordova-plugin-media-with-compression,可以录制w4a格式的文件,与mp3的大小差不多,除了文件格式, 其他代码均无需更改

2. 录音中断

    在iphone屏幕关闭后,录音后暂停,屏幕亮后继续,不知道cordova是否可以获取屏幕常亮的权限。

这些问题如果我解决后会及时更新,也希望知道答案的小伙伴可以指点一下!

六、参考

cordova插件

https://github.com/apache/cordova-plugin-media

https://github.com/remoorejr/cordova-plugin-media-with-compression

https://github.com/apache/cordova-plugin-file

H5 API

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

http://www.w3cfuns.com/notes/13967/7462fcfebf9fc7d34d917eb83bc5d0da:storey-3.html

js 打包插件

http://stuk.github.io/jszip/



作者:凌晨的夜
链接:https://www.jianshu.com/p/e07f38434ffd


0人推荐
随时随地看视频
慕课网APP