Estoy tratando de reproducir la siguiente canción en una lista de reproducción/álbum después de que la actual haya terminado de reproducirse. Pude reproducir una canción, pero no pasa a la siguiente después de que la actual termina de reproducirse.

Aquí está mi código:

 <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; }, }

¿Cómo puedo hacer que la segunda canción se reproduzca después de que la actual haya terminado y también cambiar el botón para volver a reproducir cuando no quede ninguna canción?