Cordova开发app——使用插件录音并上传服务器

本文主要使用到的主要插件有一下三个:

插件的github地址:
  1. cordova-plugin-media

  2. cordova-plugin-file

  3. cordova-plugin-file-transfer

    1、cordova-plugin-media //录音并生成音频文件
    2、cordova-plugin-file  // 对本地文件进行读写操作
    3、cordova-plugin-file-transfer // 上传文件到服务器
    

    还用到一个辅助插件(忘了是不是构建Cordova项目的时候会自动安装的!尴尬)

    插件地址:
    cordova-plugin-device

    cordova-plugin-device // 获取设备信息
    插件提供了如下的一些属性:
    device.cordova
    device.model
    device.platform
    device.uuid
    device.version
    device.manufacturer
    device.isVirtual
    device.serial
    

    由于我需要把文件存到手机中,Android和ios的文件有所不同,所以需要用到这个device插件来判断app安装的平台

     if (device.platform == "iOS") {
       this.filePath = cordova.file.tempDirectory;
     } else if (device.platform == "Android") {
       this.filePath = cordova.file.externalRootDirectory;
     }
    

下面分别写下这几个插件在从录音到上传完成的用法。

使用插件前,需要先全局监听deviceready方法,

document.addEventListener("deviceready", onDeviceReady, false);

onDeviceReady(){
    // TODO 
    // 录音相关的方法都需要现在此方法中注册
}

cordova-plugin-media的基本用法

首先需要创建一个媒体对象:

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);
// src:包含音频内容的URI
 //mediaSuccess :(可选)在Media对象完成当前播放,录制或停止操作后执行的回调。(功能)

//mediaError :(可选)发生错误时执行的回调。它需要一个整数错误代码。(功能)

// mediaStatus :(可选)执行以指示状态更改的回调。它需要一个整数状态代码。(功能)
例如:
let fileName = new Date().getTime()+'.mp3'
var my_media =  new  Media(this.filePath + fileName,mediaSuccess, [mediaError], [mediaStatus]);
// this.filePath可以指定将音频文件写入到指定文件夹下(需要先创建文件夹,如果不使用this.filePath,文件将写到根目录下)

上面的src在ios和安卓中有些区别,需要注意下!!

  1. 在ios中只支持录制.wav的音频格式,如果src是.mp3、.m4a或者其他格式会无法录制而出错;
  2. 在Android中则可以使用mp3、wav、m4a等等格式(安卓支持的格式比较多,具体请自己百度或者自己尝试~)
  3. 在ios中,src只需要用文件名即可否则会报错(==不需要this.filePath,只需要this.fileName==),Android中如果你自定义了文件存储的位置,则需要写全文件的路径(即==需要加上this.filePath==)
  4. 综上,如果只开发在安卓上使用的app,格式随意;如果要支持安卓和ios,建议使用wav(据说生成的音频文件比较大,我项目中只需要录制1分钟以内的音频,所以没哟用其他插件,github上有其他大神提供的其他插件来支持两个平台,同时录制的音频文件也比较小,欢迎自行尝试)

由于我项目中播放音频文件直接只用的html5的audio标签,没有使用插件提供的一些播放、暂停等方法,所以有需要使用插件提供方法的的同学请查看文章顶部的GitHub地址

cordova-plugin-file 的基本用法

此插件用来吧文件写到本地

安装好此插件后(==非必须==)应该在项目根目录的config.xml中配置下文件保存的位置,如果不自己配置,将会使用插件的默认配置

安卓的配置(选择两个中的一个就好)

<preference name="AndroidPersistentFileLocation" value="Internal" />

<preference name="AndroidPersistentFileLocation" value="Compatibility" />

// 插件将Internal用作默认值,文件将写到手机内置的存储中。使用Compatibility将优先写到手机的外置SD卡中(如果有外置SD卡,没有就写到内置的存储中)

ios的配置(选择两个中的一个就好)

//在iOS设备上有两个存储持久性文件的有效位置:Documents目录和Library目录。如果存到Documents目录中,会在iTunes中显示所有应用程序的文件;
<preference name="iosPersistentFileLocation" value="Library" />

<preference name="iosPersistentFileLocation" value="Compatibility" />

// 插件将Compatibilityl用作默认值),默人存在:Documents目录中

向设备中写入文件:

// this.filePath是指设备存储的根目录,ios和安卓有所不同,文章前面已经设置,下面的代码会在设备目录下创建: /weliao/voice的文件路径
window.resolveLocalFileSystemURI(this.filePath, (entry) => {
  entry.getDirectory("weiliao", {
    create: true, 
  }, (dirEntry) => {
    dirEntry.getDirectory('voice', {create: true}, function (subDirEntry) {
      //this.savefile(subDirEntry,'{a:1,b:2}','fileName.txt');
    }, this.onErrorGetDir);

  }, this.onErrorGetDir)
}, this.errorCallback)

读取之前写入的文件:

// audioFile是指之前写入的文件所在的路径(包含文件名),如:XXX/weiliao/voice/XXX.wav
window.resolveLocalFileSystemURL(audioFile, (fileEntry) => {
fileEntry.file(function (file) {
  let reader = new FileReader();
  reader.onloadend = function () {
  //reader.readAsText(file);
  reader.readAsBinaryString(file);
  // reader.readAsDataURL(file);
}, () => {
  _that.$toast('读取文件失败0003!')
});
}, this.errorCallback)

cordova-plugin-file-transfer的基本用法

本插件主要是用来上传文件到服务器,由于上一个插件读取文件获得数据格式可能和普通input读取文件的格式有些不同,导致我使用普通的ajax上传文件老是失败,在使用这个插件后上产成功了;具体失败原因还未知。。。有知道的还望

该插件用在读取文件成功之后~

function uploadFileFn(file){
let fileURL = file.localURL
    let options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = file.name;
    //options.mimeType = "text/plain";

    //上传参数
    let params = {};
    params.token = getToken();
    options.params = params;
    let ft = new FileTransfer();
    //上传地址
    var SERVER = API_URL + '/wlapi/resource/uploadAudioFile'
    ft.upload(fileURL, encodeURI(SERVER), (res) => {
      let audioURL = JSON.parse(res.response).data
      // 渲染到页面上
      if(JSON.parse(res.response).status == 'success'){
        _that.renderAudio(audioURL)
      }else {
        _that.$toast('语音发送失败')
      }
    }, (err) => {
      alert("出错了== " + JSON.stringify(err));
      // alert("An error has occurred: Code = " + err.code);
      // alert("upload error source " + err.source);
      // alert("upload error target " + err.target);
      //_that.$toast('上传失败!')
    }, options);
}

至此,在项目中从录音到上传的流程就已经走完

文章归类于: 码不停蹄

文章标签: #APP#项目

版权声明: 自由转载-署名-非商用

0条评论

提示:

评论会在审核通过后显示在下方

昵称必填,用于展示在评论中

邮箱必填,不会公开展示,方便及时收到回复

网址选填,方便看到的人去访问,请完整填写,例如(http://www.brandhuang.com)

快来抢个沙发吧