返回 导航

Cordova

hangge.com

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

作者:hangge | 2021-09-27 09:11
    我在之前的文章中介绍了 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>
评论

全部评论(0)

回到顶部