效果圖

components

template

<div class='daudio'>
        <audio ref="audio" @timeupdate="updateProgress" @ended="end" @loadedmetadata="loadedmetadata" controls
            style="display: none" src="../assets/audio/y837.mp3" preload="metadata">
            您的瀏覽器不支持音頻播放
        </audio>
        <div class="audioBox">
            <div class="audioInfo">
                <h3>2022123434.mp3（3.75KB）</h3>
                <p id="time">{{ duration }}/{{ current }}</p>
            </div>
            <img ref="control" v-if="!isPlay" src="../assets/images/paly.png" alt="" @click="audioPlay(true)"
                class="audioControls" />
            <img ref="control" v-else src="../assets/images/suspend.png" alt="" @click="audioPlay(false)"
                class="audioControls" />
        </div>
    </div>

javascript

export default {
    name: "AudioPlayer",
    data() {
        return {
            audio: null,
            contorl: null,
            contorlDot: null,
            contorlProgress: null,
            contorlProgressBox: null,
            current: "00:00",
            duration: "00:00",
            isPlay: false
        };
    },
    props: {
    },
    created() {},
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.audio = this.$refs.audio;
            this.contorl = this.$refs.contorl;
        },
        // 時(shí)分秒轉(zhuǎn)換
        transTime(value) {
            let that = this;
            var time = "";
            var h = parseInt(`${value / 3600}`);
            value %= 3600;
            var m = parseInt(`${value / 60}`);
            var s = parseInt(`${value % 60}`);
            if (h > 0) {
                time = that.formatTime(h + ":" + m + ":" + s);
            } else {
                time = that.formatTime(m + ":" + s);
            }

            return time;
        },
        // 補(bǔ)零
        formatTime(value) {
            var time = "";
            var s = value.split(":");
            var i = 0;
            for (; i < s.length - 1; i++) {
                time += s[i].length === 1 ? "0" + s[i] : s[i];
                time += ":";
            }
            time += s[i].length === 1 ? "0" + s[i] : s[i];

            return time;
        },
        // 音頻播放暫停
        audioPlay(status) {
            if (status) {
                this.audio.play();
            } else {
                this.audio.pause();
            }
            this.isPlay = status
        },
        // 更新進(jìn)度條與當(dāng)前播放時(shí)間
        updateProgress(e) {
            this.current = this.transTime(e.target.currentTime);
        },
        // 音頻結(jié)束
        end(e) {
            this.isPlay = false
        },
        loadedmetadata(e) {
            this.duration = this.transTime(e.target.duration);
        }
    },
    //如果頁(yè)面有keep-alive緩存功能，這個(gè)函數(shù)會(huì)觸發(fā)
    activated() { },
};
</script>

less

.audioBox {
    padding: 8px 16px;
    background: #eaebed;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 311px;
    height: 54px;
    box-sizing: border-box;
}

.audioControls {
    width: 22px;
    height: 22px;
}

.audioInfo {
    h3 {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0.2px;
        text-align: justify;
        font-weight: 400;
        margin-bottom: 4px;
    }

    p {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.17px;
        text-align: justify;
        font-weight: 400;
    }
}

引入

import AudioPlayer from "../../components/AudioPlayer.vue";
components: { AudioPlayer },

<AudioPlayer fileUrl="../assets/audio/y837.mp3"></AudioPlayer>

文檔參考
關(guān)于 Audio 自定義樣式
H5 audio 音頻標(biāo)簽自定義樣式修改以及添加播放控制事件文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-519509.html

到了這里，關(guān)于Vue實(shí)現(xiàn)自定義音頻播放器組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！