目前公司的webapp項目是基于meteor+react+cordova,領導要加類似微信的語音聊天功能,看了看七牛的文檔跟源碼,功能有太多我用不上的。先前上傳圖片用的是七牛提供的base64上傳方法,那如果把錄音轉成base64,也就可以上傳到七牛了。
錄音的組件我最終用的cordova-plugin-media-with-compression,錄音出來的格式是.m4a
,iOS跟Android都支持播放。
cordova-plugin-media-with-compression
與cordova-plugin-media
在Android端有區別。
var filename = "xxxx.m4a";
mediaRec = new Media(filename);
前者錄完音是在原音頻基礎上增量錄,而后者則Android跟iOS一樣,兩端都是每次重新錄音,這里我采用了每次錄音var filename = Date.now() + ".m4a"
的方法解決這個問題
//轉base64的代碼
getFileContentAsBase64(path,callback){
window.resolveLocalFileSystemURL(path, gotFile, fail);
function fail(e) {
alert('Cannot found requested file');
}
function gotFile(fileEntry) {
fileEntry.file((file) => {
var reader = new FileReader();
reader.onloadend = function(e) {
var content = this.result;
callback(content);
};
// The most important point, use the readAsDatURL Method from the file plugin
reader.readAsDataURL(file);
});
}
}
其中path參數需要做下判斷,iOS與Android的路徑不同,這里我使用了cordova-plugin-file插件,代碼如下:
var path;
var filename = Date.now() + ".m4a";
if(device.platform == "iOS") {
path = cordova.file.tempDirectory + filename;
} else if(device.platform == "Android") {
path = cordova.file.externalRootDirectory + filename;
}
然后錄音成功后調用getFileContentAsBase64
即可
var mediaRec = new Media(filename, function() {
getFileContentAsBase64(path, function(base64) {
var audio = base64.split(',')[1]; //七牛要求填寫base64后的字符串
var key = '上傳到七牛的名字';
var url = `http://up-z1.qiniu.com/putb64/-1/key/${btoa(key)}`;
//華北是up-z1,華南可能是up或upload,我忘記了
//剩下的就參考文章開頭給的七牛base64上傳方法鏈接
}
})