export default {
data() {
return {
isPlaying: false,
musicSrc: musicFile,
currentTime: 0,
duration: 0,
volume: 1
};
},
methods: {
togglePlay() {
const audio = this.$refs.audio;
if (this.isPlaying) {
audio.pause();
} else {
audio.play();
}
this.isPlaying = !this.isPlaying;
},
updateProgress() {
const audio = this.$refs.audio;
this.currentTime = audio.currentTime;
this.duration = audio.duration;
},
seek(event) {
const audio = this.$refs.audio;
audio.currentTime = event.target.value;
},
changeVolume(event) {
const audio = this.$refs.audio;
audio.volume = event.target.value;
}
},
mounted() {
const audio = this.$refs.audio;
audio.addEventListener('timeupdate', this.updateProgress);
},
beforeDestroy() {
const audio = this.$refs.audio;
audio.removeEventListener('timeupdate', this.updateProgress);
}
};
.audio-player {
display: flex;
align-items: center;
}
button {
margin-left: 10px;
}
input[type="range"] {
margin-left: 10px;
}