audio音频播放标签样式优化自定义

自定义audio音频播放样式实现进度监听,这是效果图

v-audio.vue

<template>
    <!-- audio音频组件
src：音频路径
longTime：音频时长,
sourceType:音频文件格式默认audio/mp3
index：下标，如果是数组渲染音频请必传下标
 -->
    <span>
        <span class="noaudio" v-if="!isShow">无</span>
        <span class="audio" v-if="isShow">
            <i
                class="el-icon-caret-right play"
                :class="'play' + index"
                @click="play(index)"
            ></i>
            <span class="pross">
                <span :class="'pross_line' + index" class="pross_line"></span>
                <span :class="'pross_spot' + index" class="pross_spot"></span>
            </span>
            <span>-{{ longTime }}</span>
            <audio :class="'audio' + index" controls="controls" hidden="true">
                <source :src="src" :type="sourceType" />
            </audio>
        </span>
    </span>
</template>

<script>
export default {
    name: "",
    props: {
        src: {
            type: String,
            default: ""
        },
        sourceType: {
            type: String,
            default: "audio/mp3"
        },
        index: {
            type: Number,
            default: 0
        },
        longTime: {
            type: [Number, String],
            default: ""
        }
    },
    computed: {
        isShow: {
            get () {
                if (this.src === "" || this.src == null) {
                    return false
                } else {
                    return true
                }
            },
            set () {}
        }
    },
    data () {
        return {
            tag: 0
        }
    },
    methods: {
        // 音频播放
        play (index) {
            // 切换图表状态
            const obj = document.getElementsByClassName("play" + index)[0] // 播放图表
            const MP3 = document.getElementsByClassName("audio" + index)[0] // 播放控件
            const pross_line = document.getElementsByClassName(
                "pross_line" + index
            )[0] // 播放进度长度
            const pross_spot = document.getElementsByClassName(
                "pross_spot" + index
            )[0] // 播放进度点
            const str = obj.className
            if (str.indexOf("el-icon-video-pause") > 0) {
                obj.classList.add("el-icon-caret-right")
                obj.classList.remove("el-icon-video-pause")
            } else {
                obj.classList.add("el-icon-video-pause")
                obj.classList.remove("el-icon-caret-right")
            }
            const sum = MP3.duration // 总时间
            let newsTime = MP3.currentTime // 播放时间
            // 进度条长度为128px
            let addNum = 0 // 当前播放进度长度
            // 清除上次的定时器
            clearInterval(this.tag)
            if (MP3.paused) {
                MP3.play()
                this.tag = setInterval(() => {
                    newsTime = MP3.currentTime
                    addNum = (newsTime / sum) * 112
                    pross_line.style.cssText = "width:" + addNum + "px"
                    pross_spot.style.cssText = "left:" + addNum + "px"
                    if (addNum == 112) {
                        pross_line.style.cssText = ""
                        pross_spot.style.cssText = ""
                        obj.classList.add("el-icon-caret-right")
                        obj.classList.remove("el-icon-video-pause")
                        clearInterval(this.tag)
                    }
                }, 500) // 监听播放进度
            } else {
                MP3.pause()
                clearInterval(this.tag)
                obj.classList.add("el-icon-caret-right")
                obj.classList.remove("el-icon-video-pause")
            }
        }
    }
}
</script>

<style lang="less" scoped>
.audio {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    color: #fff;
    height: 14px;
    background: #868686;
    width: 208px;
    border-radius: 6px;
    .play {
        font-size: 20px;
        padding-right: 17px;
    }
    .pross {
        display: inline-block;
        background: rgba(255, 255, 255, 0.2);
        margin-right: 5px;
        width: 128px;
        height: 5px;
        position: relative;
    }
    .pross_spot {
        top: -2.5px;
        position: absolute;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #fff;
    }
    .pross_line {
        position: absolute;
        background: #fff;
        height: 5px;
        left: 0;
        width: 0;
    }
}
</style>