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

发表于 阅读次数：

Cordova开发App，语音消息功能开发，调用手机麦克风录音。

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

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

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

插件地址：
cordova-plugin-device

1
2
3
4
5
6
7
8
9
10
11
 cordova-plugin-device // 获取设备信息
 插件提供了如下的一些属性：
 device.cordova
device.model
device.platform
device.uuid
device.version
device.manufacturer
device.isVirtual
device.serial

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

1
2
3
4
5
6
if (device.platform ** "iOS") {
  this.filePath = cordova.file.tempDirectory;
} else if (device.platform ** "Android") {
  this.filePath = cordova.file.externalRootDirectory;
}

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

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

1
2
3
4
5
6
document.addEventListener("deviceready", onDeviceReady, false);

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

cordova-plugin-media的基本用法

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

1
2
3
4
5
6
7
8
9
10
11
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中配置下文件保存的位置，如果不自己配置，将会使用插件的默认配置

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

1
2
3
4
5
<preference name="AndroidPersistentFileLocation" value="Internal" />

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

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

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

1
2
3
4
5
6
//在iOS设备上有两个存储持久性文件的有效位置：Documents目录和Library目录。如果存到Documents目录中，会在iTunes中显示所有应用程序的文件；
<preference name="iosPersistentFileLocation" value="Library" />

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

// 插件将Compatibilityl用作默认值），默人存在：Documents目录中

向设备中写入文件：

1
2
3
4
5
6
7
8
9
10
11
12
// 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)

读取之前写入的文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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上传文件老是失败，在使用这个插件后上产成功了；具体失败原因还未知。。。有知道的还望

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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);
}

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