Ionic 录音插件

本文介绍 Ionic cordova 平台下两个录音插件 cordova-plugin-media-capture 和 cordova-plugin-media的使用。

1. cordova-plugin-media-capture

1. 安装

①  进入项目的根目录。

②  安装 cordova plugin：sudo ionic cordova plugin add cordova-plugin-media-capture

③  安装ionic native plugin：sudo npm install --save @ionic-native/media-capture

2. 使用

import { MediaCapture, MediaFile, CaptureError, CaptureAudioOptions } from '@ionic-native/media-capture';									
									
@Component({									
    providers: [MediaCapture]									
})									
									
constructor(public mediaCapture: MediaCapture) {}									
…									
									
let options: CaptureAudioOptions = { limit: 1, duration: 10 };									
this.mediaCapture.captureAudio(options).then(									
    function (mediaFiles: MediaFile[]) { },									
    function (err: CaptureError) { }									
);	

3. 权限

config.xml：

									
    need microphone access to record sounds				
	

ios:

NSMicrophoneUsageDescription							
need microphone access to record sounds	

android:

4. 设置比特率

ios 平台下通过修改 CDVCapture.m 设置比特率。

5. 设置保存路径

ios：默认保存路劲为 /var/mobile/Containers/Data/Application/UUID/tmp/xxx.wav，可以通过修改 CDVCapture.m 更改保存路径。

android：默认保存路径为 file:///storage/emulated/0/Recordings/xxx.amr by default，可以通过修改 Capture.java 更改保存路径。

6. 上传

android 和 ios 都可通过 File Transfer Plugin 将录音文件上传至服务器。

安装 cordova plugin：sudo ionic cordova plugin add cordova-plugin-file-transfer

安装 ionic native plugin：sudo npm install --save @ionic-native/file-transfer

使用：

import { FileTransfer, FileUploadOptions, FileTransferObject, FileUploadResult } from '@ionic-native/file-transfer';											
											
@Component({											
  providers: [FileTransfer, FileTransferObject]											
})											
											
constructor(public ft: FileTransfer) {}											
...											
											
let options: FileUploadOptions = {											
  fileKey: "file",											
  fileName: "file.wav",											
  mimeType: "audio/wav"											
};											
											
const ftObj: FileTransferObject = this.ft.create();											
ftObj.upload(this.file.documentsDirectory.replace(/^file:\/\//, '') + 'file.wav',											
  encodeURI("http://xxx/upload.php"), options).then(											
  (data) => {											
    alert("File upload success!");											
  },											
  (err) => {											
    alert("File upload fail!");											
  });	

服务器端处理上传的代码：

2. cordova-plugin-media

1. 安装

①  进入项目的根目录。

②  安装 cordova plugin： sudo ionic cordova plugin add cordova-plugin-media

③  安装ionic native plugin：sudo npm install --save @ionic-native/media

2. 使用

import { Media, MediaObject } from '@ionic-native/media';               
import { File } from '@ionic-native/file';                
                
@Component({                
    providers: [Media, File]                
})                
                
constructor(public media: Media, public file: File) { }               
…               
                
let mediaObj;               
mediaObj = this.media.create("file.wav");               
mediaObj.startRecord();                 
mediaObj.onSuccess.subscribe(() => alert('Record success!'));               
mediaObj.onError.subscribe(err => alert('Record fail! Error: ' + err));               
window.setTimeout(() => mediaObj.stopRecord(), 10 * 1000); 

3. 权限

config.xml：

             
    need microphone access to record sounds                
  

ios:

NSMicrophoneUsageDescription							
need microphone access to record sounds	

android:

4. 设置比特率

ios 平台下通过修改 CDVSound.m 设置比特率。

5. 设置保存路径

android 和 ios 均可通过 File Plugin 的 createFile 去创建文件，改文件路径即为录音文件的保存路径。

6. 上传

android 和 ios 都可通过 File Transfer Plugin 将录音文件上传至服务器。

安装 cordova plugin：sudo ionic cordova plugin add cordova-plugin-file-transfer

安装 ionic native plugin：sudo npm install --save @ionic-native/file-transfer

使用：

import { FileTransfer, FileUploadOptions, FileTransferObject, FileUploadResult } from '@ionic-native/file-transfer';											
											
@Component({											
  providers: [FileTransfer, FileTransferObject]											
})											
											
constructor(public ft: FileTransfer) {}											
...											
											
let options: FileUploadOptions = {											
  fileKey: "file",											
  fileName: "file.wav",											
  mimeType: "audio/wav"											
};											
											
const ftObj: FileTransferObject = this.ft.create();											
ftObj.upload(this.file.documentsDirectory.replace(/^file:\/\//, '') + 'file.wav',											
  encodeURI("http://xxx/upload.php"), options).then(											
  (data) => {											
    alert("File upload success!");											
  },											
  (err) => {											
    alert("File upload fail!");											
  });			

服务器端处理上传的代码：

3. 两个录音插件的比较

测试版本： 

ios 10.3.2  
android 6.0 
[email protected]  
[email protected]  

4. 完整代码

https://gitee.com/AuroraDuring/codes/uj6dl3bx5ho8f20qges7k84