Cordova - media媒体插件的使用详解（录音、音频播放）

2021-09-27 发布：hangge 阅读：1184

我在之前的文章中介绍了 Cordova 提供的媒体捕获插件（Media Capture）可以进行音频的录制（点击查看），本文接着介绍另一个可以进行录音的插件：Media 媒体插件。

不同于 Media Capture 插件在录音时会自动打开录音器界面进行录音，Media 插件是在后台进行录音。并且除了录音功能外，Media 还提供了音频播放的功能。下面通过样例演示该插件的使用。

1，安装插件

首先我们要在“终端”中进入工程所在的目录，然后运行如下命令安装插件：

cordova plugin add cordova-plugin-media

2，使用样例

（1）效果图

点击“开始录音”按钮即可进行录音，录音完毕只需点击“结束录音”按钮即可将录音文件保存至手机。
录音过程中随时可以进行暂停、继续录音，最终结束时会自动将各个片段拼接成一个完整的录音文件。
点击“开始播放”“结束播放”按钮，可以对刚录制的音频文件进行播放、停止播放。同时在播放过程中可以随时暂停、继续播放。

（2）样例代码：

<!DOCTYPE html>
<html>
<head>
    <title>hangge.com</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

        // 音频对象
        var media;
        // 录音文件地址
        var filePath = "hangge.mp3";

        // 开始录音按钮点击
        function startRecord() {
            this.media = new Media(this.filePath,  () => {
              alert('录音完毕！');
            }, (err) => {
              alert('录音失败：' + JSON.stringify(err));
            });
            //开始录音
            this.media.startRecord();
        }

        // 暂停录音按钮点击
        function pauseRecord() {
            this.media.pauseRecord();
        }

        // 继续录音按钮点击
        function resumeRecord() {
            this.media.resumeRecord();
        }

        // 结束录音按钮点击
        function stopRecord() {
            this.media.stopRecord();
        }

        // 开始播放按钮点击
        function startPlay() {
            this.media = new Media(this.filePath,  () => {
              alert('播放完毕！');
            }, (err) => {
              alert('播放失败：' + JSON.stringify(err));
            });
            //开始录音
            this.media.play();
        }

        // 暂停播放按钮点击
        function pausePlay() {
            this.media.pause();
        }

        // 继续播放按钮点击
        function resumePlay() {
            this.media.play();
        }

        // 结束播放按钮点击
        function stopPlay() {
            this.media.stop();
        }
    </script>
</head>
<body style="padding-top:50px">
    <button style="font-size:15px;" onclick="startRecord();">开始录音</button>
    <button style="font-size:15px;" onclick="pauseRecord();">暂停录音</button>
    <button style="font-size:15px;" onclick="resumeRecord();">继续录音</button>
    <button style="font-size:15px;" onclick="stopRecord();">结束录音</button>
    <br><br>
    <button style="font-size:15px;" onclick="startPlay();">开始播放</button>
    <button style="font-size:15px;" onclick="pausePlay();">暂停播放</button>
    <button style="font-size:15px;" onclick="resumePlay();">继续播放</button>
    <button style="font-size:15px;" onclick="stopPlay();">结束播放</button>
</body>
</html>