4.1 KiB
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.
We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.
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 nextElement = player.generateNextElement();
document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElement);
const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);