样式如图所示

<template><div class="audio-player"><div class="player_top" flex-ac  flex-justify-between ><div class="fileName  genericTitle" fs-28 l-height-32 height-64 pr-42 flex-ac><span class="text-line-2">{{ fileName }}</span></div><div class="play_btn"><div class="toPlay" width-60 height-60 v-if="!playStatus" @click="onPlay"></div><div class="toStop" width-60 height-60 v-else @click="onPause"></div></div></div><div class="player_time" fs-14 mt-13 mb-8 flex  flex-justify-between><span class="play_audioCurrent" style="color:#1e62d9"> {{ transTime(audioCurrent) }} </span><span class="play_audioDuration" style="color:#A5A5A5"> {{ transTime(audioDuration) }} </span></div><div class="play_progress" pl-13 pr-13><el-slider v-model="playProgress" :show-tooltip="false" @input="onProgressChange" /></div></div><audio ref="audioRef" :src="url" @canplay="onCanplay" @timeupdate="updateProgress" @ended="playEnd" />
</template><script setup lang="ts">
import { ref, onBeforeMount, onUnmounted, onMounted, watch, nextTick } from 'vue';const props = defineProps({// 音频地址url: {type: String,required: true},// 音频名称fileName: {type: String,required: false}
});
const emits = defineEmits(['play', 'timeupdate']);
watch(() => props.url,newVal => {if (newVal) {nextTick(() => {initAudio();});}}
);const speedVisible = ref<boolean>(false); // 设置音频播放速度弹窗
const audioRef = ref<HTMLAudioElement | null>(null); // 音频标签对象
const activeSpeed = ref(1); // 音频播放速度
const audioDuration = ref(0); // 音频总时长
const audioCurrent = ref(0); // 音频当前播放时间
const audioVolume = ref(1); // 音频声音，范围 0-1
const playStatus = ref<boolean>(false); // 音频播放状态：true 播放，false 暂停
const playProgress = ref(0); // 音频播放进度const initAudio = () => {if (audioRef.value) {audioRef.value.load();playStatus.value = false;playProgress.value = 0;audioRef.value.src = props.url;}
};// 音频加载完毕的回调
const onCanplay = () => {audioDuration.value = audioRef?.value.duration || 0;
};
const onPlay = async () => {// 音频播放完后，重新播放if (transTime(audioCurrent.value) === transTime(audioDuration.value)) audioRef.value.currentTime = 0;await audioRef.value.play();playStatus.value = true;audioDuration.value = audioRef.value.duration;emits('play');
};
const onPause = () => {audioRef.value.pause();playStatus.value = false;
};
// const onChangeSpeed = (value: number) => {
//   activeSpeed.value = value;
//   // 设置倍速
//   audioRef.value.playbackRate = value;
//   speedVisible.value = false;
// };
// const onHandleSpeed = () => {
//   speedVisible.value = !speedVisible.value;
// };
// // 设置声音
// const onSetVolume = (value: number) => {
//   audioRef.value.volume = value;
//   audioVolume.value = value;
// };
// 音频播放时间换算
const transTime = (value: number) => {let time = '';let h = parseInt(String(value / 3600));value %= 3600;let m = parseInt(String(value / 60));let s = parseInt(String(value % 60));if (h > 0) {time = formatTime(h + ':' + m + ':' + s);} else {time = formatTime(m + ':' + s);}return time;
};
// 格式化时间显示，补零对齐
const formatTime = (value: string) => {let time = '';let s = value.split(':');let 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;
};
const onTimeUpdate = () => {if (audioRef.value) {audioCurrent.value = audioRef.value.currentTime;const progressPercentage = (audioRef.value.currentTime / audioRef.value.duration) * 100;emits('timeupdate', {currentTime: audioCurrent.value,duration: audioDuration.value,progress: progressPercentage});}
};
const onProgressChange = (value: number) => {// if (!value) {//   return;// }console.log(value,'value');audioRef.value.currentTime = (value / 100) * audioDuration.value;
};
const updateProgress = (e) => {// console.log(e,'e');onTimeUpdate();const value = e.target.currentTime / e.target.duration;if (audioRef.value.play) {playProgress.value = value * 100;audioCurrent.value = audioRef.value.currentTime;}
};
const playEnd = () => {playStatus.value = false;
};
// onMounted(() => {
//   initAudio();
// });
onBeforeMount(() => {});
onUnmounted(() => {
});
</script><style lang="scss" scoped>
.audio-player {width: 100%;height: 193px;background: #ffffff;border: 10px solid #c5e9ff;border-radius: 20px;padding: 26px 26px 0 26px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;.player_top{width: 100%;}.player_time{width: 100%;}.play_progress{width: 100%;::v-deep(.el-slider__runway){height: 10px;border-radius: 6px;background-color: #e5e5e5;.el-slider__bar{height: 10px;border-radius: 6px;background: linear-gradient(270deg,#53c0ff, #3870ff);}.el-slider__button-wrapper{top: -13px;}.el-slider__button{width: 26px;height: auto !important;aspect-ratio: 1 !important;background-color: #1E62D9;border: px2vw(4) solid #ffffff;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);}}}.play-icon {width: 60px;height: 60px;// margin-right: 7px;cursor: pointer;}.play-time {}.play-progress {width: 160px;height: 4px;background-color: #323547;box-shadow: inset 0px 1px 0px 0px #20222d;border-radius: 2px;margin-right: 16px;position: relative;.play-current-progress {height: 4px;background: #00e5ff;border-radius: 2px;position: absolute;top: 0;left: 0;}}.play-voice {width: 20px;height: 20px;margin-right: 14px;cursor: pointer;}.play-speed {cursor: pointer;color: #00e5ff;}.fileName {}.play_btn {cursor: pointer;.toPlay {background: url('@/assets/images/icon_play_audio@2x.png') no-repeat;background-size: 100% 100%;background-origin: border-box;background-clip: content-box;&:hover {background: url('@/assets/images/icon_play_audio_h@2x.png') no-repeat;background-size: 100% 100%;background-origin: border-box;background-clip: content-box;}}.toStop {background: url('@/assets/images/icon_stop_audio@2x.png') no-repeat;background-size: 100% 100%;background-origin: border-box;background-clip: content-box;&:hover {background: url('@/assets/images/icon_stop_audio_h@2x.png') no-repeat;background-size: 100% 100%;background-origin: border-box;background-clip: content-box;}}}
}
</style>

使用

              <AudioPlayer:url="currentResource?.resourceUrl":fileName="currentResource?.resourceName"@play="playMedia"@timeupdate="toUpdatePlayMediaTime"/>// 音视频触发播放
const playMedia = () => {// console.log(currentResource.value, 'playMedia开始播放');
};
// 音视频播放进度
const toUpdatePlayMediaTime = e => {if (e.progress > 85 && currentResource.value.completeStatus === 0) {// 音视频播放进度大于85则该资源标记为学习完成}
};