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()
            },

通過定時器動態的設定播放器背景色的長度

歡迎指出問題