2022-04-18 16:46:23 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet" href = "./assets/css/prism.css" / >
< script src = "./assets/js/prism.js" defer > < / script >
2022-04-18 17:07:29 +00:00
< script src = "./assets/js/audioshowkit.js" > < / script >
2022-04-18 16:46:23 +00:00
< / head >
< body >
< div >
< h1 > Creating a Music Playlist< / h1 >
< p >
2022-04-18 23:23:12 +00:00
A music playlist is a list of {@link Music} which maintains metadata about the playlist, such as the length, and the name of the playlist. It also keeps track of an index for a position in the playlist.
2022-04-18 16:46:23 +00:00
< / p >
< / div >
< div >
< h2 > Instantiation< / h2 >
2022-04-18 17:07:29 +00:00
< p > Instantiation is simple. We grab a reference to the audioshowkit library from global, and then under the "player" path, we find the music playlist constructor.< / p >
2022-04-18 16:46:23 +00:00
< pre > < code class = "language-js" >
// Get the entry point to all of AudioShowKit's glory.
const ask = window.audioshowkit;
// The only parameter is the name of the playlist.
const playlist = new ask.player.MusicPlaylist("Awesome Music");
< / code > < / pre >
< / div >
< div >
< h2 > Adding Music< / h2 >
< p > A music playlist is no good if it doesn't have music. Lets add some.< / p >
< pre > < code class = "language-js" >
// Still using the same context from the instantiation example...
playlist.add("/assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy.
playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
< / code > < / pre >
2022-04-18 23:23:12 +00:00
< p > If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!< / p >
2022-04-18 16:46:23 +00:00
< pre > < code class = "language-js" >
// Still using the same context from the instantiation example...
// Either instantiate, or otherwise have this Music object.
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic); // Wow, a special function!
< / code > < / pre >
< / div >
< div >
< h2 > Display< / h2 >
< p > In the case you want to show the playlist without coding your own display, we provide a simple generator for you!< / p >
< pre > < code class = "language-js" >
// Still using the same context from the instantiation example...
const playlistElem = playlist.generatePlaylistElement(); // Returns an HTMLElement!
// Assuming we do have an acceptable element that can take a child element.
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
< / code > < / pre >
< div class = "result" >
< h3 > Result< / h3 >
< div id = "musicplaylist-demo" >
< / div >
< / div >
< script >
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
2022-04-18 21:19:50 +00:00
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy.
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
2022-04-18 16:46:23 +00:00
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic);
const playlistElem = playlist.generatePlaylistElement();
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
< / script >
< / div >
< / body >
< / html >
