目前公司的webapp项目是基于meteor+react+cordova,领导要加相似微信的语音聊天功能,看了看七牛的文档跟源码,功能有太多我用不上的。先前上传图片用的是七牛提供的base64上传方法,那若是把录音转成base64,也就能够上传到七牛了。react
录音的组件我最终用的cordova-plugin-media-with-compression,录音出来的格式是.m4a
,iOS跟Android都支持播放。git
cordova-plugin-media-with-compression
与cordova-plugin-media
在Android端有区别。var filename = "xxxx.m4a"; mediaRec = new Media(filename);
前者录完音是在原音频基础上增量录,然后者则Android跟iOS同样都是每次从新录音,这里我采用了每次录音var filename = Date.now() + ".m4a"
的方法解决这个问题github
//转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插件,代码以下:web
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
便可apache
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上传方法连接 } })