Ionic-Native 中media插件的使用,录音功能的实现

目前Ionic官方提供了很多native插件,方便调用手机等设备的原生接口。
最近在研究在ionic项目中加入录音功能,完成简单录音功能后,并做下笔记,我用到的是Ionic native中的media插件和file插件。

简单介绍下这两个插件:(官方介绍:mediafile

media插件:实例化一个音频对象,需要在手机目录中创建一个音频类型文件来存储数据,可以实现对该音频进行录音,播放,暂停,设置音频属性等。

file插件:实例化一个file对象,可以对移动设备中目录进行各种操作(创建目录,文件,移除目录,文件,把文件格式转成base64格式等)。

安装media和file插件

--media插件
ionic cordova plugin add cordova-plugin-media
npm install --save @ionic-native/media

--file插件
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file

media插件的用法:

import { Media, MediaObject } from '@ionic-native/media';
constructor(private media: Media) { }

//也在app.module中引入,在provider中加入依赖

file插件的用法:

import { File } from '@ionic-native/file';
constructor(private file: File) { }

//也在app.module中引入,在provider中加入依赖

录音功能的简单实现:
1. 我的做法是先实例化一个file对象,通过它提供设备的存储路径。
2. 要弄清楚media.create()方法的参数。(文件的名字URL)
3. 这样存储的录音文件由于不具备唯一性,所以每一次录音都会被后一次的覆盖掉。
4. 建议编写工具类,如:日期;给录音文件名字加一个日期前缀,文件就不会被覆盖。
5. 计时器工具类等,提供录音记时。

import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';

export class Record {
constructor( private media: Media , private file: File ) { }

public filePath : any; //录音文件的名字
public recordData : any; //录音对象

startReocrd(){  //开始录音

    //文件URL,文件存放在拓展内存卡中文件夹下,命名为Record.mp3
    this.filePath = this.file.externalDataDirectory + "Record.mp3";

    //创建media对象,参数文件名字,上面的filePath也指定了文件存放位置和文件名字
    this.recordData = this.media.create(this.filePath);

    //开始录音
    this.recordData.startRecord();
}

pauseRecord(){   

    //暂停录音
    this.recordData.pauseRecord();

}

play(){   

    //播放录音
    this.recordData.play();

}

resumeRecord(){   

    //继续播放录音
    this.recordData.resumeRecord();

}

stopRecord(){   

    //停止结束录音
    this.recordData.stopRecord();

}}

简单的录音功能就实现了。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值