audioshowkit/tutorials/MusicPlaylist.html

3.4 KiB

<html lang="en"> <head> </head>

Creating a Music Playlist

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.

Instantiation

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.


            // 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"); 
        

Adding Music

A music playlist is no good if it doesn't have music. Lets add some.


            // 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.
        

If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!


            // 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!
        

Display

In the case you want to show the playlist without coding your own display, we provide a simple generator for you!


            // 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); 
        

Result

</html>