Cordova開發app——使用外掛錄音並上傳伺服器

重慶崽兒brand發表於2019-03-06
APP伺服器

本文首發在我的個人部落格上： http://www.brandhuang.com

本文主要使用到的主要外掛有一下三個：

外掛的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);
}
複製程式碼

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

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

歡迎留言探討

相關文章