audioshowkit/tutorials/MusicPlayer.html

<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>

<div class="part">
    <h2>Creating a Music Player</h2>
    <p>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.</p>
</div>
<div class="part">
    <h3>Instantiating a Music Player</h3>
    <p>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.</p>
    <pre><code class="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 class="part">
    <h3>Display a Play Button</h3>
    <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><code class="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>
    <h4>The play button</h4>
    <p>Go ahead and hit the play button!</p>
    <div class="result">
        <div id="musicplayer-playbtn-demo">
        </div>
    </div>
</div>
<div class="part">
    <h3>Similarly, Next and Previous Buttons</h3>
    <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><code class="language-js">
        // 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);   
    </code></pre>
    <h4>Produces</h4>
    <p>Feel free to try the buttons and see what happens! We'll show the playlist display demonstrated in the [MusicPlaylist tutorial]{@tutorial MusicPlaylist}.</p>
    <div class="result">
        <div id="musicplayer-playlist-display">
        </div>
        <div id="musicplayer-nav-demo">
        </div>
    </div>
</div>
<script>
    const ask = window.audioshowkit;
    const playlist = new ask.player.MusicPlaylist("Awesome Music");

    playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
    playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");


    const playlistDispElement = playlist.generatePlaylistElement();
    document.getElementById("musicplayer-playlist-display").append(playlistDispElement);

    const player = new ask.player.MusicPlayer(playlist);
    const playElem = player.generatePlayElement();
    document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);

    const nextElem = player.generateNextElement();
    document.getElementById("musicplayer-nav-demo").appendChild(nextElem);

    const prevElem = player.generatePreviousElement();
    document.getElementById("musicplayer-nav-demo").appendChild(prevElem);
</script>