cordova录音转base64上传七牛

作者: Godi13 | 来源:发表于2016-11-18 16:51 被阅读736次

目前公司的webapp项目是基于meteor+react+cordova,领导要加类似微信的语音聊天功能,看了看七牛的文档跟源码,功能有太多我用不上的。先前上传图片用的是七牛提供的base64上传方法,那如果把录音转成base64,也就可以上传到七牛了。

录音的组件我最终用的cordova-plugin-media-with-compression,录音出来的格式是.m4a,iOS跟Android都支持播放。

cordova-plugin-media-with-compressioncordova-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上传方法链接
  }
})

相关文章

  • cordova录音转base64上传七牛

    目前公司的webapp项目是基于meteor+react+cordova,领导要加类似微信的语音聊天功能,看了看七...

  • URL安全的Base64加密

    encodebase64 七牛上传base64文件时 encodedkey 时会用到

  • 6.基于SpringBoot的文件上传

    上传方式: 直接上传到应用服务器 上传到css(阿里云、七牛云) 前端将图片转成Base64编码上传 http:/...

  • 基于SpringBoot的文件上传

    上传方式: 直接上传到应用服务器 上传到css(阿里云、七牛云) 前端将图片转成Base64编码上传 http:/...

  • 基于SpringBoot的文件上传

    方式: 直接上传到应用服务器 上传到OSS(阿里云、七牛云) 前端将图片转成Base64编码上传

  • IOS七牛上传录音

    上传图片之前说过,但是今天在上传录音时遇到问题。还是用putData 的方式 发现传上去并不能播放。 需要将key...

  • 基于SpringBoot的文件上传

    上传方式 直接上传到应用服务器 上传到css(阿里云 七牛云 前端将图片转成Base64编码上传image.png

  • 基于springboot的文件上传

    文件上传方式 直接上传到应用服务器 上传到oss(阿里云,七牛云) 前端将图片转成Base64编码上传 上传服务器...

  • JS 文件base64、File、Blob、ArrayBuffe

    file对象转base64 base64 转成blob 上传 blob 转成ArrayBuffer buffer ...

  • 五.SpringBoot文件上传

    三种上传方式直接上传到应用服务器云储存---上传到OSS(阿里云)、七牛云前端将图片转成Base64编码上传(适用...

网友评论

  • fd9977831a2b:你好,我现在转换的base64编码是mpeg格式的,能否指定转换为amr
  • 43f281b5f655:那上传成功了返回的key怎么处理啊,才能播放
    Godi13:抱歉刚看到,通过你上传七牛后,生成的链接播放即可

本文标题:cordova录音转base64上传七牛

本文链接:https://www.haomeiwen.com/subject/rntspttx.html