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/