效果图

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;
        },
        // 时分秒转换
        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;
        },
        // 补零
        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
        },
        // 更新进度条与当前播放时间
        updateProgress(e) {
            this.current = this.transTime(e.target.currentTime);
        },
        // 音频结束
        end(e) {
            this.isPlay = false
        },
        loadedmetadata(e) {
            this.duration = this.transTime(e.target.duration);
        }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    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>

文档参考
关于 Audio 自定义样式
H5 audio 音频标签自定义样式修改以及添加播放控制事件