Creating a Music Player

One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.

Instantiating a Music Player

Instantiating a music player requires a {@link MusicPlaylist}. See the [MusicPlaylist tutorial]{@tutorial MusicPlaylist} for information on how to get one of those! Once you have one, you can proceed with instantiating a Music Player.

        const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
        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.
    

Display a Play Button

We need some user interactive element to start playing music. You can set this up yourself, or use a generated one by us! We'll show you how to do the latter, but feel free to read the documentation on all the methods available that can be used in event listeners to see how to do the former.

        // Still using the same context from the instantiation example...
        const playElement = player.generatePlayElement();
        document.getElementById("musicplayer-playbtn-demo").appendChild(playElement); // Assuming this element exists.
    

The play button

Go ahead and hit the play button!

Similarly, Next and Previous Buttons

We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.

        // Still using the same context from the instantiation example...
        const nextElem = player.generateNextElement();
        document.getElementById("musicplayer-nav-demo").appendChild(nextElem);
    
        const prevElem = player.generatePreviousElement();
        document.getElementById("musicplayer-nav-demo").appendChild(prevElem);   
    

Produces

Feel free to try the buttons and see what happens! We'll show the playlist display demonstrated in the [MusicPlaylist tutorial]{@tutorial MusicPlaylist}.