小程序背景音频

2020-07-02

1.功能需求：

小程序后台可以继续播放音频
音频播放，暂停，播放进度时时更新
进度条拖拽

2.效果图：

3.直接上代码

index.wxml文件（没啥可说的，小程序slider组件）

slider相关属性参考官方文档：slider

<view class="progress">

    <view class='audiosBox'>

        <view class='slid'>

            <!-- 进度时长 -->

            <text class='times'>{{startTime}}</text>

            <slider bindchanging="sliderChange" bindchange="sliderChange" block-size="16rpx" color="#F2F2F2" step="1" value="{{progress}}" max="100" selected-color="#7490EF" block-color="#7490EF"/>

            <!-- 总时长 -->

            <text class='times'>{{duration}}</text>

        </view>

    </view>

</view>

<view class="pause">

    <!-- 播放,暂停图片展示-->

    <view class="audioOpen" bindtap="audioPlay" wx:if="{{!isOpen}}">

        <image src="{{isOpen ? 'https://fs.partner.luboedu.cn/meditate-project/web/playPause.png' : 'https://fs.partner.luboedu.cn/meditate-project/web/playPagePlay.png'}}"></image>

    </view>

</view>

index.js文件

参考小程序背景音频API BackgroundAudioManager

1）首先获取全局唯一的背景音频管理器

1	const backgroundAudioManager = wx.getBackgroundAudioManager()

2）从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。

1	{“pages”: [“pages/index/index”],“requiredBackgroundModes”: [“audio”]}

3）通过接口获取音频播放源，注意音频播放源不要有汉字！不要有汉字！不要有汉字！会导致苹果手机报错code：10003，文件错误。即使通过encodeURI(‘src’)，苹果手机有时还是会播放不了。

data: {
    src: '', //   音源
    isOpen: false, // 控制播放暂停图片显示
    startTime: '00:00' , // 开始时间
     progress: 0, // 进度条步长
    duration: '', // 总时长

}
// 接口调用，获取音频信息，在onLoad中调用该方法
getData () {
    // 可以封装一下微信请求数据的方法，这里就不封装了
    wx.request({
        url: 'https://www.xxxxx',
        method: 'post',
        data: data, 
        success: function(){
            // 请求成功，更新音频数据
            this.setData({
                src: res.data.src,
                 duration: res.data.duration
            })
            // title必须有并且不能为空，否则苹果手机会报错，设置src后，音频自动播放，不必执行play方法
            backgroundAudioManager.title = res.data.unitTitle
            backgroundAudioManager.src = this.data.src
            // 可以通过onError方法监测音频错误
            backgroundAudioManager.onError((err) => { console.log(err)})
        }
}

// 播放和暂停事件比较简单，直接调用方法

// 暂停事件

audioPause () {
    backgroundAudioManager.pause() 
    this.setData({ isOpen: false })
}

// 播放事件

audioPlay () {
    backgroundAudioManager.play()
    this.setData({ isOpen: false })
}

// 进度条拖拽
sliderChange(e) {
    let duration = this.data.duration
    let offset = parseInt(e.detail.value) / 100;
    // 音频跳转时间
    let time = parseInt(duration * offset)
    // seek()   方法跳转到指定时间，单位S
    backgroundAudioManager.seek(time);
}

// 背景音乐播放进度，在背景音频播放时调用该方法起到监测的作用，用来时时更新当前播放时间以及进度条步长

currentTimeChange(){
    backgroundAudioManager.onTimeUpdate(() => {
        let offset = backgroundAudioManager.currentTime;
        let current = parseInt(offset)
        let duration = backgroundAudioManager.duration;
        const progress = parseInt((current / duration) * 100)
        this.setData({ progress: progress, startTime: time.timeDuration(current) })
    }
},

// 监测播放结束
endPlay(){
    backgroundAudioManager.onEnded(() => {
        console.log('监测播放结束')
        // do something
     })
},
// 监测音频停止
stopPlay(){
    backgroundAudioManager.onStop(() => {
        console.log('监测音频停止')
       // do something
    })
}

写在最后，当音频处于播放状态时，点击列表中该条音频，应该是继续播放而不是重新播放，此时可以判断一下当前音频是否是播放状态，如果是的话，不做任何操作（此时音频会继续播放），不是的话赋值src和title进行播放

errorCode说明：

errorCode	说明
10001	系统错误
10002	网络错误
10003	文件错误
10004	格式错误
-1	未知错误

展开全文 >>