I am in the process of developing a music app, and my goal is to have the next song automatically play when the current one ends. However, I am facing an issue where the EventListener seems to be triggered multiple times in succession - first once, then twice, and so on, with the number increasing each time it's triggered. I have searched other websites for solutions but haven't been able to find one. I hope someone here can assist me with this problem.
Just to provide some context, I'm using Vue.js for this project.
Here is a snippet of my data:
data () {
return {
current: {},
index: 0,
isPlaying: false,
api_key: '4f40bf40b2msh6d957020229b6c6p1fe925jsn4ef16ee46284',
url_base: 'https://deezerdevs-deezer.p.rapidapi.com',
songs: [],
query:'',
player: new Audio()
}
},
And here is the method I am using to play the music:
play (song) {
if (typeof song.title != "undefined") {
this.current = song;
this.player.src = this.current.preview;
}
this.player.play();
this.player.addEventListener('ended', function () {
console.log(this.index);
if (this.index > this.songs.length - 1) {
this.index = 0;
}
this.current = this.songs[this.index];
this.play(this.current);
}.bind(this));
this.isPlaying = true;
},
If anyone has any suggestions on how I can improve this functionality, I would greatly appreciate it.