1.根据业务需求反应，及网上阅读资料，代码缺斤少两，本文复制粘贴即可使用，但注意引用了第三库的字体图标，可注释掉替换自己想要的图标即可。
效果如下:
1.template模块
<template><div class="container"><audio @canplay="getDuration" controls @timeupdate="updateTime" v-show="false" ref="audio":src="audioSrc"/><div class="card"><div class="progress" ref="progress" @click="clickProgress" @mouseup="handleMouseup"><div class="currentProgress" ref="currentProgress"><span class="circle" ref="circle" @mousedown="handleMousedown"></span></div></div><div class="time"><span class="startTime">{{currentDuration }}</span><span class="endTime">{{duration }}</span></div><div class="option"><span class="pre" @click="handleBack"><img src="@/assets/img/快退.png" alt=""> <span style="color: #C7C7C9;font-size: 13px;margin-left: 10px">-{{backSecond }}s</span></span><span class="play" @click="handlePauseOrPlay"><el-icon size="35px" color="#3853FE"><video-pause v-show="!paused"/><video-play v-show="paused"/></el-icon></span><span class="next" @click="handleForward"><span style="color: #C7C7C9;font-size: 13px;margin-right: 10px">+{{forwardSecond }}s </span><img src="@/assets/img/快进.png" alt=""></span></div></div></div></template>
2.js部分
<script>import {VideoPause,VideoPlay} from '@element-plus/icons-vue'export default {name: "index",components:{VideoPause,VideoPlay},props: {audioSrc: {type: String,default: 'https://img-/Audio//02/06/08/0206081849_A100187_34f7e6b8-thumb.mp3'},backSecond: {type: Number,default: 3},forwardSecond: {type: Number,default: 10}},data() {return {duration: '00:00',currentDuration: '00:00',audio: '',paused: true,isMoveIn: false, //是否在移动中}},methods: {//后退handleBack() {if (this.audio.currentTime > this.backSecond) {this.audio.currentTime = this.audio.currentTime - this.backSecond}},//前进handleForward() {if (this.audio.duration - this.audio.currentTime > this.forwardSecond) {this.audio.currentTime = this.audio.currentTime + 10}},//暂停或播放handlePauseOrPlay() {this.audio.paused ? this.audio.play() : this.audio.pause()this.paused = !this.paused},//视频在可以播放时触发getDuration() {this.duration = this.timeFormat(this.$refs.audio.duration)this.audio = this.$refs.audio},//将单位为秒的的时间转换成mm:ss的形式timeFormat(number) {let minute = parseInt(number / 60);let second = parseInt(number % 60);minute = minute >= 10 ? minute : "0" + minute;second = second >= 10 ? second : "0" + second;return minute + ":" + second;},//进度条发生变化时触发updateTime() {if (!this.$refs.progress) returnthis.currentDuration = this.timeFormat(this.audio.currentTime)//如果不是正在移动 和 没有暂停播放就执行if (!this.isMoveIn || !this.audio.paused) {// 设置当前时间let MoveX = this.$refs.progress.clientWidth * (this.audio.currentTime / this.audio.duration)//播放时更新距离this.$refs.currentProgress.style.width = MoveX + 'px'this.$refs.circle.style.left = MoveX - (this.$refs.circle.clientWidth / 2) + 'px'}},//点击进度条更新进度clickProgress(e) {//如果不是正在移动 和 没有暂停播放就执行if (!this.isMoveIn || !this.audio.paused) {this.updateProgress(e.offsetX)}},//更新进度updateProgress(MoveX) {//当前移动的位置 = 当前移动的位置 / 当前进度条的可视长度 //this.$refs.progress.clientWidth 注意一定要拿总长度 否则会拿进度条已经走过的长度let clickProgress = (MoveX / this.$refs.progress.clientWidth)//设置播放的时间 = 总时长 * 当前点击的长度this.audio.currentTime = this.audio.duration * clickProgress//设置移动的位置this.$refs.currentProgress.style.width = MoveX + 'px'this.$refs.circle.style.left = MoveX - (this.$refs.circle.clientWidth / 2) + 'px'},//鼠标弹起handleMouseup() {setTimeout(() => {this.audio.play()this.paused = falsethis.isMoveIn = false}, 200)},//小圆圈按下handleMousedown() {this.audio.pause()this.paused = truethis.isMoveIn = truelet progress = this.$refs.progress//进度条 左 边距离页面左边的距离 移动最小值let moveMin = progress.offsetParent.offsetLeft + progress.offsetLeft//进度条 右 边距离页面左边的距离 移动最大值let moveMax = progress.offsetParent.offsetLeft + progress.offsetLeft + progress.clientWidth//小圆圈的宽度let circleWidth = (this.$refs.circle.clientWidth / 2)let move = (move) => {if (move.pageX >= moveMax) {return} else if (move.pageX <= moveMin) {return}this.$refs.circle.style.left = move.pageX - moveMin - circleWidth + 'px'this.updateProgress(move.pageX - moveMin)}//获取当前鼠标的位置 Xdocument.addEventListener('mousemove', move)//鼠标弹起来document.addEventListener('mouseup', () => {document.removeEventListener('mousemove', move)})},}}</script>
3.样式部分
<style scoped lang="less">.card {width: 300px;padding: 30px;box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.03);border-radius: 10px;.progress {height: 7px;border-radius: 3px;margin-bottom: 5px;width: 100%;background-color: #DADFEA;cursor: pointer;.currentProgress {position: relative;height: 100%;width: 0;background-color: #3853FE;border-radius: 3px;.circle {position: absolute;right: -6px;top: -2px;display: inline-block;width: 10px;height: 10px;border-radius: 50%;border: 1px solid #3853FE;background-color: #fff;&:hover {width: 12px;height: 12px;top: -3px;border-radius: 50%;}}}}.time {display: flex;justify-content: space-between;color: #777A85;font-size: 12px;}.option {display: flex;justify-content: space-between;align-items: center;padding: 20px 30px 0 30px;.play, .pre, .next {display: flex;padding: 0 2px;align-items: center;cursor: pointer;}}}</style>
拒绝白票，从我做起，对你有思路就动动小指头点个start，收藏关注哦!
