小程序音频控制、播放器功能的封装

---

前言

基于 "wx.createInnerAudioContext" 设置小程序音频播放组件，有序控制多音频播放顺序，并设置进度条。 相关文档：

微信小程序官方文档

---

1、设置全局变量，记录内部 audio

• 设置全局变量 “sound”，用于创建内部 audio 上下文 InnerAudioContext 对象：

let sound = null

2、配置音频进度条

• 设置进度条组件，并配置样式

<slider selected-color="#1989fa" value="{{sliderValue}}" bindchange="timeSliderChanged" class="bar" />

.bar {
    width: 100%;
    margin-right: 15px;
}

• 设置 “sliderValue” 数据，用于更新播放进度

/**
 * 页面的初始数据
 */
data: {
    sliderValue: 0,
},

• 设置进度跳转事件

// 设置进度
timeSliderChanged (e) {
    var time = e.detail.value / 100 * sound.duration;
    // 设置音频跳转位置
    sound.seek(time)
},

3、配置音频播放函数

• 设置音频播放事件：

soundEffecrt(url) {
		// 包裹在try中，防止"sound.destroy()"出现报错而影响后续系统正常运行
        try {
        	// 如果当前已经有音频在播放，则销毁正在播放的音频
            if (sound) sound.destroy();
        } catch (error) {} finally {
        	// 重新创建 InnerAudioContext 对象
            sound = wx.createInnerAudioContext({
                useWebAudioImplement: "true"
            })
            // 如果音频来源为本地音频，则设置本地地址
            sound.src = `assets/audio/${url}.mp3`
            sound.play()
            // 如果音频来源为链接，则调用上面的 "sound.play()"会报错，通过错误监听api接受到后对音频地址重新赋值并播放
            sound.onError((res) => {
                sound.src = `${url}`
                sound.play()
            })

			// 各种监听事件，更多可查看官方文档
            sound.onPlay(() => {
                //------------------监听音频播放事件------------------
            })
            sound.onPause(() => {
            	//------------------监听音频暂停事件------------------
            })
            sound.onStop((res) => {
            	//------------------监听音频停止事件------------------
            })
            sound.onEnded(res => {
            	//------------------监听音频自然播放至结束的事件------------------
            	// 在较短的音频中，音频播放结束会出现进度条更新不及时的情况，所以这里规范更新进度条为100%
                this.setData({
                    sliderValue: 100
                })
            })
            sound.onTimeUpdate(res => {
            	//------------------监听音频播放进度更新事件------------------
                // 音频播放进度被更新重新设置进度条进度
                this.setData({
                    sliderValue: sound.currentTime / sound.duration * 100
                })
            })
        }
    },

• 添加播放事件和暂停事件，方便调用：

//播放
playAudio() {
    sound.play()
},
//暂停
pauseAudio() {
    sound.pause()
},

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。