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);
}
複製代碼

至此，在項目中從錄音到上傳的流程就已經走完。

感謝您的閱讀，文章水平有待提升，我回加油的～～

歡迎留言探討