<p>One of the most basic principles behind AudioShowKit is the {@link module:player/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.</p>
</div>
<div>
<h2>Instantiating a Music Player</h2>
<p>Instantiating a music player requires a {@link module:player/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.</p>
<pre><codeclass="language-js">
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.
</code></pre>
</div>
<div>
<h2>Display a Play Button</h2>
<p>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.</p>
<pre><codeclass="language-js">
// Still using the same context from the instantiation example...
const playElement = player.generatePlayElement();
document.getElementById("musicplayer-playbtn-demo").appendChild(playElement); // Assuming this element exists.
</code></pre>
<h3>The play button</h3>
<p>Go ahead and hit the play button!</p>
<divclass="result">
<divid="musicplayer-playbtn-demo">
</div>
</div>
</div>
<div>
<h2>Similarly, Next and Previous Buttons</h2>
<p>We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.</p>
<pre><codeclass="language-js">
// Still using the same context from the instantiation example...
