diff --git a/src/player/MusicPlaylist.js b/src/player/MusicPlaylist.js index 5871ec4..0790702 100644 --- a/src/player/MusicPlaylist.js +++ b/src/player/MusicPlaylist.js @@ -212,14 +212,20 @@ export default class MusicPlaylist { authorHeader.innerText = "Author"; headers.appendChild(authorHeader); - const insertMusic = (music, musicPos = undefined) => { - if (musicPos) musicPos++; + const insertMusic = (music, musicPos) => { + if (isNaN(musicPos)) throw new Error("Music position in playlist required."); + musicPos++; const row = element.insertRow(musicPos); row.insertCell().innerText = music.displayName; row.insertCell().innerText = music.author; + row.addEventListener("click", () => { + this.currentPosition = musicPos - 1; + }); }; + let musicInd = 0; for (const music of this) { - insertMusic(music); + insertMusic(music, musicInd); + musicInd++; } this.addLengthChangeListener((changed, added, music) => { diff --git a/tutorials/MusicPlayer.html b/tutorials/MusicPlayer.html index bf2c759..5761bb9 100644 --- a/tutorials/MusicPlayer.html +++ b/tutorials/MusicPlayer.html @@ -20,6 +20,12 @@ const playlist = previousPlaylist; // We are assuming you have a playlist ready. const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist. + +

We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.

+
+
+
+

Display a Play Button

@@ -66,6 +72,9 @@ playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); + const playlistDispElement = playlist.generatePlaylistElement(); + document.getElementById("playlist-display").append(playlistDispElement); + const player = new ask.player.MusicPlayer(playlist); const playElem = player.generatePlayElement(); document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);