结合vantUI封装自定义音频组件

<template>
    <div id="customAudio">
        <div class="audio-contain">
            <div class="audio-img"
                 @click="playClick">
                <img src="@/assets/img/icon_play.png"
                     alt="">
            </div>
            <div style="position:relative;">
                <van-slider v-model="audio"
                            @change="onChange"
                            @drag-start="dragStart"
                            @drag-end="dragEnd"
                            active-color="#64d0a1"
                            :min="0"
                            :max="maxTime"
                            id="slider"
                            ref="slider">
                    <template #button>
                        <div class="custom-button"></div>
                    </template>
                </van-slider>
                <audio src="http://lstyty.oss-cn-hangzhou.aliyuncs.com/lstpems/audio/2021/4/25/3436c2f120db420ea30cda65cea003e6.mp3"
                       id="music"
                       @timeupdate="timeupdate"
                       @loadedmetadata="loadedmetadata"
                       ref="music"></audio>
            </div>

            <div class="atime">
                <span>{{currentTime }} </span>/
                <span>{{endTime}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Slider } from 'vant';
import {formatSeconds} from '@/assets/js/common.js';
Vue.use(Slider);
export default {
    name: "CustomAudio",
    data () {
        return {
            val: 50,
            onOff: false, // 控制播放暂停按钮
            audio: 0, // 音频播放的位置和音频的时间
            currentTime: '00:00', // 当前播放位置
            endTime: '00:00', // 时间总长度
            maxTime: 0, // van-slider的最大值
            audioImg:'', // 播放暂停图片
        };
    },
    mounted () {
        this.audioImg = document.querySelector('.audio-img img');
    },
    methods: {
        // 播放/暂停
        playClick () {
            if (this.$refs.music.paused) {
                this.$refs.music.play()
                this.onOff = true;
                this.audioImg.src = require('@/assets/img/icon_stop.png');

            } else {
                this.$refs.music.pause()
                this.onOff = false;
                this.audioImg.src = require('@/assets/img/icon_play.png');
            }
        },
        // 音频实时播放信息
        timeupdate (e) {
            let min = '0' + parseInt(e.target.currentTime / 60)
            let sec = parseInt(e.target.currentTime) % 60
            if (sec < 10) {
                sec = "0" + sec
            }
            if (this.onOff) {
                this.currentTime = min + ':' + sec
                this.audio = e.target.currentTime
            }
            // 如果当前时间等于总时间按钮变成停止状态
            if (e.target.currentTime === this.$refs.music.duration) {
                this.onOff = false;
                this.audioImg.src = require('@/assets/img/icon_play.png');
            }
        },
        // 获取音频信息
        loadedmetadata (e) {
            this.endTime = formatSeconds(this.$refs.music.duration); // 音频时间转换
            this.maxTime = e.target.duration;
        },
        // 拖拽开始
        dragStart () {
            this.onOff = false
        },
        // 改变位置
        onChange (val) {
            this.onOff = true;
            this.$refs.music.currentTime = val;
            this.$refs.music.play();
            this.audioImg.src = require('@/assets/img/icon_stop.png');
        },
        // 拖拽结束
        dragEnd () {
            this.onOff = true;
            this.audioImg.src = require('@/assets/img/icon_stop.png');
        },

    },
}
</script>
<style>
#customAudio {
    width: 61.22vw;
    height: 4.23vw;
    margin-left: 8.79vw;
    margin-top: 0.97vw;
}
.audio-contain {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.van-slider {
    width: 38.76vw;
    height: 1.269vw;
    background: #c7c7c7;
}
.van-slider__button {
    width: 2.248vw;
    height: 2.248vw;
    background: #ffffff;
    border: 0.195vw solid #64d0a1;
    border-radius: 50%;
}
.atime {
    margin-left: 1.55vw;
    color: #c7c7c7;
    font-size: 1.955vw;
}
.audio-img {
    margin-right: 1.8797vw;
    width: 4.23vw;
    height: 4.23vw;
    border-radius: 50%;
    background-color: #64d0a1;
    line-height: 4.23vw;
    text-align: center;
}
.audio-img img {
    height: 1.955vw;
    width: 1.564vw;
}
</style>

音频时间转换函数

// 音频时间转换
export function formatSeconds (value) { 
    var secondTime = parseInt(value); // 秒
    var minuteTime = 0; // 分
    if (secondTime > 60) {
        minuteTime = parseInt(secondTime / 60);
        secondTime = parseInt(secondTime % 60);
    }
    var result = "" + parseInt(secondTime)
    if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + ":" + result;
    }
    return result;
}