cordova-plugin-media 錄音并打包上傳

一、錄音.

插件:cordova-plugin-media

官網(wǎng)中的示例代碼很詳細(xì)了,src可以為"cdvfile://localhost/persistent/"的形式,但我未能測試通過,因此采用“name.wav”

src: recordFileName = “name.wav”?

src的name命名有限制,在小米和華為測試中發(fā)現(xiàn):不能有‘/’,否則文件無法播放,不能有“:”,否則文件無法讀取。

示例代碼

用cordova media插件進(jìn)行錄音

存儲地址:

需要依賴cordvoa-plugin-file 插件,如果直接存為 “name.wav” 那么安卓會存儲在根目錄下"<sdcard>/ ",對應(yīng)插件中的cordova.file.externalRootDirectory,小米4需重啟才能在手機(jī)中看到該文件。

二、讀取文件

已有的方法為利用?H5?的?FileReader.readAsDataUrl()?方法,但是文件只能由用戶拖拽或選擇路徑,詳情可參看參考文獻(xiàn)。

本項目要求上傳給定路徑的文件,選擇cordova的插件 cordova-plugin-file 來讀取文件

Android 讀取錄音文件代碼

Android音頻文件“name.wav”的讀取

錄音文件在Android的地址是"<sdcard>/", 這點我使出渾身解數(shù)也沒在網(wǎng)上找到答案,還是做Android的前輩指點所得,深表感謝。根據(jù)cordova-plugin-file官網(wǎng)中對應(yīng)的Layout(https://github.com/apache/cordova-plugin-file#android-file-system-layout)可知,resolveLocalFileSystemURL的第一個參數(shù)應(yīng)該是cordova.file.externalRootDirectory。

iOS 讀取錄音文件代碼:

iOS音頻文件“name.wav”的讀取

cordova-plugin-media 的官網(wǎng)指定了src為“name.wav”時,錄音文件在iOS的存貯地址,可采用 window.requestFileSystem 方法讀取window.TEMPORARY文件系統(tǒng),獲得的dirEntry對象的root值,即為文件所在目錄。

轉(zhuǎn)beas64

讀取的文件流就是base64格式的,所以不存在轉(zhuǎn)base64的問題。iOS中data的格式是audio/wav。

Android讀取的文件數(shù)據(jù)

三、打包上傳

本項目要求一次上傳所有需要的音頻文件,而cordova-plugin-file-transfer插件一次只能上傳單個文件,因此需要生成zip文件,選取jszip插件來進(jìn)行打包

四、刪除文件

如需刪除手機(jī)本地文件,可獲取文件入口fileEntry后調(diào)用其remove方法

刪除本地文件

五、iOS的問題

1.文件太大

? ? 由于這個插件在iOS只能錄wav格式的音頻,文件體積非常大,大概3分鐘15M。這造成兩個問題,一是上傳太大,后臺可能設(shè)限制。二是文件讀取到手機(jī)內(nèi)存中,會引起內(nèi)存不足而強(qiáng)制退出app。

該問題已解決:

采用封裝過的插件?https://github.com/remoorejr/cordova-plugin-media-with-compression,可以錄制w4a格式的文件,與mp3的大小差不多,除了文件格式, 其他代碼均無需更改

2. 錄音中斷

? ? 在iphone屏幕關(guān)閉后,錄音后暫停,屏幕亮后繼續(xù),不知道cordova是否可以獲取屏幕常亮的權(quán)限。

這些問題如果我解決后會及時更新,也希望知道答案的小伙伴可以指點一下!

六、參考

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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容