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：

<edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge">									
    <string>need microphone access to record sounds</string>				
</edit-config>	

ios:

<key>NSMicrophoneUsageDescription</key>							
<string>need microphone access to record sounds</string>	

android:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />									
<uses-permission android:name="android.permission.RECORD_AUDIO" />									
<uses-permission android:name="android.permission.RECORD_VIDEO" />									
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

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!");											
  });	

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

<?php 
header('Access-Control-Allow-Origin: *');

if(move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]))
{
	echo 'upload success!!!';
} else {
	echo '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：

<edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge">             
    <string>need microphone access to record sounds</string>                
</edit-config>  

ios:

<key>NSMicrophoneUsageDescription</key>							
<string>need microphone access to record sounds</string>	

android:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />         
<uses-permission android:name="android.permission.RECORD_AUDIO" />                
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />         
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 

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!");											
  });			

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

<?php 
header('Access-Control-Allow-Origin: *');

if(move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]))
{
	echo 'upload success!!!';
} else {
	echo 'upload fail!!!';
}
?>

3. 两个录音插件的比较

测试版本： 

ios 10.3.2  
android 6.0 
cordova-plugin-media-capture@2.0.0  
cordova-plugin-media@4.0.0  

4. 完整代码

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