ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added switching between items in playlist display.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-19 17:47:14 -05:00
parent 9a940ea55d
commit d0d6f87f34
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/player/MusicPlaylist.js
View File

@ -212,14 +212,20 @@ export default class MusicPlaylist {
authorHeader.innerText = "Author"; authorHeader.innerText = "Author";
headers.appendChild(authorHeader); headers.appendChild(authorHeader);
const insertMusic = (music, musicPos = undefined) => { const insertMusic = (music, musicPos) => {
if (musicPos) musicPos++; if (isNaN(musicPos)) throw new Error("Music position in playlist required.");
musicPos++;
const row = element.insertRow(musicPos); const row = element.insertRow(musicPos);
row.insertCell().innerText = music.displayName; row.insertCell().innerText = music.displayName;
row.insertCell().innerText = music.author; row.insertCell().innerText = music.author;
row.addEventListener("click", () => {
this.currentPosition = musicPos - 1;
});
}; };
let musicInd = 0;
for (const music of this) { for (const music of this) {
insertMusic(music); insertMusic(music, musicInd);
musicInd++;
} }
this.addLengthChangeListener((changed, added, music) => { this.addLengthChangeListener((changed, added, music) => {

9
tutorials/MusicPlayer.html
View File

@ -20,6 +20,12 @@
const playlist = previousPlaylist; // We are assuming you have a playlist ready. 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. const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist.
</code></pre> </code></pre>
<p>We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.</p>
<div class="result">
<div id="playlist-display">
</div>
</div>
</div> </div>
<div> <div>
<h2>Display a Play Button</h2> <h2>Display a Play Button</h2>
@ -66,6 +72,9 @@
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); 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 player = new ask.player.MusicPlayer(playlist);
const playElem = player.generatePlayElement(); const playElem = player.generatePlayElement();
document.getElementById("musicplayer-playbtn-demo").appendChild(playElem); document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);