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

本文首发在个人我的博客上： http://www.brandhuang.com

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

插件的github地址：

1. cordova-plugin-media
2. cordova-plugin-file
3. cordova-plugin-file-transfer

一、cordova-plugin-media //录音并生成音频文件
 二、cordova-plugin-file  // 对本地文件进行读写操做
 三、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是.mp三、.m4a或者其余格式会没法录制而出错；
2. 在Android中则能够使用mp三、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);
}
复制代码

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

感谢您的阅读，文章水平有待提升，我回加油的～～

欢迎留言探讨