1.在使用的地方调用
<Audiosvue ref="audio" class="audio-box" :audioFile="item.cont"></Audiosvue>2.引入组件
import Audiosvue from "@/components/audio";3.组件
<template><div><div style="display: flex;align-items: center;"><input type="range" v-model="progress" min="0" max="100" step="0.1" @input="updateAudioTime" class="inputStyle"><span style="width: 100px;display: block;">{{ currentTime }} / {{ totalTime }}</span><button @click="playPauseAudio">{{ isPlaying ? '暂停' : '播放' }}</button></div></div>
</template><script>
export default {props: {audioFile: {type: String,},},data() {return {audio: null,isPlaying: false,currentTime: '00:00',totalTime: '00:00',progress: 0,isDragging: false};},computed: {},mounted() {// this.fetch();},created() {// 创建 Audio 对象this.audio = new Audio(this.audioFile);// 监听时间更新事件
this.audio.addEventListener('timeupdate', this.updateTimeAndProgressBar);},methods: {playPauseAudio() {if (this.isPlaying) {this.audio.pause();} else {this.audio.play();}this.isPlaying = !this.isPlaying;},updateAudioTime() {const currentTime = (this.progress / 100) * this.audio.duration;this.audio.currentTime = currentTime;if (!this.isDragging) {this.updateTimeAndProgressBar();}},updateTimeAndProgressBar() {const currentTime = this.audio.currentTime;const totalTime = this.audio.duration;this.currentTime = this.formatTime(currentTime);this.totalTime = this.formatTime(totalTime);this.progress = (currentTime / totalTime) * 100;},formatTime(time) {const minutes = Math.floor(time / 60);const seconds = Math.floor(time % 60);return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;}},
};
</script><style lang="scss" scoped>
.inputStyle{width: 200px;
}
</style>
4.效果
