I am facing an issue with my code where I am trying to play the next song in a playlist or album after the current one finishes playing. Although I was able to get a song to play, it does not progress to the next one automatically.
Below is the snippet of my code:
<button class="controlButton play" title="Play" @click="play" v-if="!isPlaying">
<img src="storage/icons/play.png" alt="Play">
</button>
<button class="controlButton pause" title="Pause" @click="pause" v-else>
<img src="storage/icons/pause.png" alt="Pause">
</button>
<script>
import { Link } from "@inertiajs/inertia-vue3";
export default {
components: {
Link
},
data() {
return {
audio: new Audio(),
currentSong: {},
myWidth: 0,
loop:{},
index: 0,
songs: [
{
title: 'Song',
artist: 'Artis A',
src: '/storage/audio/song.mp3',
cover: '/storage/images/cover.jpeg',
},
{
title: 'Song 2',
artist: 'Artis B',
src: '/storage/audio/song2.mp3',
cover: '/storage/images/cover2.jpeg',
},
mounted() {
this.currentSong = this.songs[this.index];
},
methods: {
play(song) {
if(typeof song.src != 'undefined') {
this.currentSong = song;
this.audio.src = this.currentSong.src
}
this.audio.play();
this.isPlaying = true
this.activeItem = this.currentSong
},
pause() {
this.audio.pause();
this.isPlaying = false;
},
}
I need help on how I can ensure that the second song plays automatically after the current one ends and also change the button back to "play" when there are no more songs left in the playlist.