微信小程序自定义音频组件

在做微信小程序的时候想做一个ui自定义的音频播放组件，如果使用官方给的audio组件是无法实现的，这时候就可以自定义音频播放组件，做成自己想要的样子。

由于官方提供了一个InnerAudioContext的api，可以使用这个api来实现音频的播放。

1. 创建实例

//创建实例
const innerAudioContext = wx.createInnerAudioContext();
//自动播放
innerAudioContext.autoplay = true;
//音频src
innerAudioContext.src = audioSrc;

得到音频的实例后设置音频的各个需要的属性。

2. 音频ui

在wxml中根据自己的需要编写自己的ui，由于每个人的ui都不同，这里就不展示代码了。

3. 音频管理

在实际的情况中我们可能会碰到下面的这些情况：

支持多个音频同时播放
多个音频多时播放的时候显示各自的进度条

如果想实现这些功能的时候要实例一套音频队列管理的逻辑
原理和思路：实现一个管理队列，将多个音频按照插入队列的时间排好一个队列，每个成员都保存当前音频的一些重要的属性，比如id，src，duration，isPlaying, innerAudioContext等等，再提供一些操作该队列的api来实现对所有音频的统一管理。

/**
 * 管理audio实例队列
 * 方法：
 *      push: 加入队列方法
 *      update：更新方法
 *      clear：清空队列方法
 *      get：通过id获取对应的audio实例的信息
 *      getCurrentPlay：获取正在播放中的audio实例信息
 *      getAll：获取所有实例信息
 */

 class AudioManager {
    consotructor(){
        this.audioManageArr = [];
    }

    push(audio) {
        //数据存储数组
        const audioArray = this.audioManageArr || [];

        const {
            id = '',  //音频id
            innerAudioContext = null,  //innerAudioContext实例
            isPlaying = false,  //是否正在播放
            audioSrc = '',  //音频的src
            sliderValue = '0%' //进度条的值
        } = audio;

        audioArray.push({
            id,
            innerAudioContext,
            isPlaying,
            audioSrc,
            sliderValue
        });

        this.audioManageArr = audioArray;
    }

    update(audioId, info) {
        const audioManageArr = this.audioManageArr || [];
        audioManageArr.map((item) => {
            if (item.audioId === audioId) {
                item = info;
            } 
        });
        this.audioManageArr = audioManageArr;
    }

    clear() {
        this.audioManageArr = [];
    }

    get(audioId){
        const audioManageArr = this.audioManageArr || [];
        const list = audioManageArr.filter((item) => {
            return audioId === item.audioId;
        });
        return list[0];
    }

    getCurrentPlay(){
        const audioManageArr = this.audioManageArr || [];
        if (audioManageArr.length === 0) {
            return {};
        }
        const list = audioManageArr.filter((item) => {
            return item.isPlaying === true;
        });
        return list;
    }

    getAll(){
        return this.audioManageArr || [];
    }

 }

有了上述的管理方法后，就可以操作每个音频而又互不影响。