VUE+audio 自定义简单的音乐播放器

H5的audio标签在不设置controls这个属性的情况下，那么他会默认的隐藏本身的空间。但是方法还能用。
本文主要用的API的方法和事件：
1： ended 当视频/音频播放完时触发（事件）
2：play 播放 （方法）
3：pause 暂停（方法）
4：load 重新加载 （方法）

HTML：

<audio :src="audioUrl[0].url" id="audio" @ended="overAudio"></audio>
 <div class="audio-box">
    <div class="line-wrapper" ref="line">
          <div class="line-bg" :style="{width: audioWidth + 'px'}"></div>
 </div>
</div>
<!-- 播放 -->
<div class="play" v-if="audioPlayShow" @click="playAudio">
     <img src="/static/image/audio_play.png">
</div>
<!-- 暂停-->
<div class="play" v-else>
    <img src="/static/image/audio_pause.png" @click="pauseAudio">
</div>

JS

            /**
             * 播放音频
             */
            playAudio() {
                this.audioPlayShow = false
                let audio = this.audio = document.getElementById('audio')
                /**
                 * this.$refs.line.offsetWidth 是容器的宽度
                 * audio.duration 是音乐的播放时间长度
                 */
                let step = this.toFixed(this.$refs.line.offsetWidth / audio.duration, 1)
                if (this.audioIsOver) {
                    this.audioIsOver = false
                    this.audioWidth = 0
                    audio.load()
                }
                this.audioInterval = setInterval(() => {
                    this.audioWidth = this.add(this.audioWidth, step)
                }, 1000)
                audio.play()
            },
            /**
             * 暂停音频
             */
            pauseAudio() {
                this.audioPlayShow = true
                let audio = document.getElementById('audio')
                audio.pause()
                // 清除定时器
                clearInterval(this.audioInterval)
            },
            /**
             * 音频播放完的时候
             */
            overAudio() {
                this.audioWidth = this.$refs.line.offsetWidth
                this.audioIsOver = true
                this.pauseAudio()
            },

通过定时器动态的设置播放器背景色的长度

欢迎指出问题