微信小程序音頻（三）使用BackgroundAudioManager 播放音頻並展示進度

原創

2021-12-25 21:16

一、使用BackgroundAudioManager 播放音頻並展示進度

說明：

1.使用圖片自帶wx.preview 將停止音頻播放；（這個是很費解，相當不友好）

2.獲取全局唯一的背景音頻管理器。小程序切入後臺，如果音頻處於播放狀態，可以繼續播放。但是後臺狀態不能通過調用API操縱音頻的播放狀態。

從微信客戶端6.7.2版本開始，若需要在小程序切後臺後繼續播放音頻，需要在 app.json 中配置 requiredBackgroundModes 屬性。開發版和體驗版上可以直接生效，正式版還需通過審覈。

3.官網詳細介紹：https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html

wxml

<text>
    播放狀態：{{audio.currentTime}}s / {{audio.duration}} s
</text>
<slider value="{{audio.percent}}" bindchange="sliderChange"></slider>
<button type="primary" bindtap="payClick">
    <text wx:if="{{audio.isPlaying}}">點擊暫停</text>
    <text wx:else>點擊播放</text>
</button>

js：

const context = wx.getBackgroundAudioManager();
Page({

    /**
     * 頁面的初始數據
     */
    data: {
        audio: {
            isPlaying: false, //播放狀態
            //時間位置
            currentTime: 0,
            duration: 0,
            isWarting: false
        },
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        var _this = this;
        //音頻播放處理
        //開始播放
        context.onPlay(() => {
            console.info('開始播放');
        });
        //進度監聽
        context.onTimeUpdate(() => {
            console.info(context.currentTime, context.duration);
            _this.setData({
                'audio.currentTime': context.currentTime,
                'audio.duration': context.duration,
                'audio.percent': context.currentTime / context.duration * 100,
            });
        });

        context.title = '測試音頻';
        context.epname = '此時此刻'
        context.singer = '許巍'
        context.coverImgUrl = "http://www.jnqianle.cn/upload/logo/content/202109/24/e2b864e3-5cb7-4785-843a-5e551c59d270.jpg";
        context.src = 'http://music.jnqianle.cn/file/audio/9.mp3';

    },
    //播放暫停
    payClick() {
        var _this = this;
        if (context.paused) {
            context.play(); //暫停播放
        } else {
            context.pause(); //開始播放
        }
        _this.setData({
            'audio.isPlaying': !_this.data.audio.isPlaying
        });
    },
    //切換進度
    sliderChange(e) {
        var _this = this;
        var val = e.detail.value;
        var second = context.duration * val / 100;
        context.seek(second);
    },


})

二、展示效果