封装web audio 音频播放类

使用h5 audio api播放音频

获取audio 的3种方式 ：
1，使用浏览器提供的原生对象

const audio = new Audio()

2，创建音频标签的形式

const audio = document.createElement('audio')

3，html页面直接使用音频标签然后通过js代码获取

<audio id="audio"></audio>
<script>
    const audio = document.getElementById('audio')
</script>

audio元素的属性及方法在这里不多加讲解，详情请自行参考api文档(也可以点击这里哟)

选用第1种方式来操作音频实现代码如下：

class EventBus {
    // 事件缓存对象
    events = Object.create(null)
    constructor() { }
    // 获取监听器
    getListeners(type) {
        return this.events[type] = this.events[type] || []
    }
    // 添加监听事件
    on(type, fn) {
        const listeners = this.getListeners(type)
        // 同一个方法仅允许被添加一次
        if (!listeners.includes(fn)) {
            listeners.push(fn)
        }
    }
    // 移除监听事件
    off(type, fn) {
        const listeners = this.getListeners(type)
        const index = listeners.indexOf(fn)
        if (index < -1) {
            return
        } else {
            listeners.splice(index, 1)
        }
    }
    // 移除所有监听器
    removeAll(type) {
        this.events[type] = []
    }
    // 触发监听事件
    fire(type, ...args) {
        this.getListeners(type).forEach(fn => fn(...args))
    }
}
/**
 * 后台播放音频类
 */
class BGAudio extends EventBus {
    // 音频标签
    audio = null
    // 播放音频地址
    audioUrl = null
    // 可以添加的有效音频相关事件名称
    // 事件存在兼容性问题
    validEvents = [
        'loadstart', // 客户端开始请求数据
        'progress', // 客户端正在请求数据（或者说正在缓冲）
        'play', // play()和autoplay播放时
        'pause', // pause()方法触发时
        'ended', // 当前播放结束
        'timeupdate', //当前播放时间发生改变的时候
        'canplaythrough', //歌曲已经载入完全完成
        'canplay', // 缓冲至目前可播放状态
        'onloadedmetadata', // 当元数据（比如分辨率和时长）被加载时
        'error', // 播放出错
    ]
    // 播放状态 pending(待定)  playing(播放中)  pausing(暂停中)
    playStatus = 'pending' // 待定状态
    CONSTANT = {
        pending: 'pending',
        playing: 'playing',
        pausing: 'pausing',
    }
    constructor(config = {}) {
        super()
        this.audioUrl = config.audioUrl
        this.audio = new Audio()
        const onEvents = config.on || {}
        Object.keys(onEvents).forEach((name) => {
            this.on(name, onEvents[name])
        })
        this.on('error', () => {
            this.stop()
        })
    }
    // 是否有效事件名称
    isValidEventName(eventName) {
        return this.validEvents.includes(eventName)
    }
    // 添加监听器
    on(type, handler) {
        super.on(type, handler)
        this.audio.addEventListener(type, handler, false)
    }
    // 移除监听器
    off(type, handler) {
        this.remove(type, handler)
    }
    // 移除监听器,当fn不存在时,移除type所有监听器
    remove(type, handler) {
        if (handler) {
            super.off(type, handler)
            this.audio.removeEventListener(type, handler, false)
        } else {
            this.getListeners(type).forEach((fn) => {
                this.audio.removeEventListener(type, fn, false)
            })
            super.removeAll(type)
        }
    }

    /**
     * 播放相关
     */
    // 设置音频地址
    setAudioUrl(url) {
        this.audioUrl = url
    }
    // 设置播放状态标志
    setPlayStatus(status) {
        this.playStatus = status
    }
    // 播放，可传递音频地址
    play(url) {
        const originUrl = this.audioUrl
        if (url) {
            // url存在则使用新地址
            this.setAudioUrl(url)
        }
        // 存在音频地址才播放
        if (!this.audioUrl) {
            return
        }
        const audio = this.audio
        //处于暂停状态才需要播放
        if (audio.paused) {
            this.setPlayStatus(this.CONSTANT.playing)
            // 地址变化的时候才需要重新赋值，因为重新赋值会导致刷新操作
            if (originUrl !== this.audioUrl || !this.audio.src) {
                this.audio.src = this.audioUrl
            }
            this.audio.play()
        }
    }
    // 按进度播放
    playByRate(playRate) {
        if (playRate < 0 || playRate > 100) {
            playRate = 0
        } else if (playRate > 100) {
            playRate = 100
        }
        playRate = playRate / 100
        this.playByTime(this.audio.duration * playRate)
    }
    // 按时间播放
    playByTime(time) {
        const audio = this.audio
        if (time < 0) {
            time = 0
        } else if (time > audio.duration) {
            time = audio.duration
        }
        audio.currentTime = time
        this.play()
    }
    // 暂停
    pause() {
        this.setPlayStatus(this.CONSTANT.pausing)
        this.audio.pause()
    }
    // 停止
    stop() {
        this.playByTime(0)
        this.pause()
        this.setPlayStatus(this.CONSTANT.pending)
    }
    // 播放与暂停切换
    togglePlay() {
        if (this.playStatus === this.CONSTANT.playing) {
            this.pause()
        } else {
            this.play()
        }
    }
    // 重新加载
    reload() {
        this.setPlayStatus(this.CONSTANT.pending)
        this.audio.load()
    }
}