audioshowkit/tutorials/VisMusicPlayer.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">
    <h1>Visualizing Music</h1>
    <p>This is the fun part. We can use a {@link VisualizedMusicPlayer} and a {@link MusicPlaylist} to create a music player that is like {@link MusicPlayer} but with the ability to automatically fetch the current {@link Visualizer}. On top of that, it then routes that visualizer data to {@link VisualizerUpdateManager} which can be to make much more refined mappings.</p>

    This library comes with a variety of mapping tools:
    <ul>
        <li>Want to map ranges of frequency bins to width, height, and other dimensions related properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!</li>
        <li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li>
        <li>We even do font color in the {@link module:mappings/coloring} module!</li>
    </ul>
</div>
<div class="part">
    <h2>Instantiation</h2>
    <p>Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.</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.VisualizedMusicPlayer(playlist) // Creates a new music player with the playlist.
    </code></pre>
</div>
<div class="part">
    <h2>Playback</h2>
    <p>Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information. We also added the playlist display to show you which song you're listening to.</p>
    <div class="result">
        <div id="playlist-display">
        </div>
        <div id="playback-ctrls">
        </div>
    </div>
</div>
<div class="part">
    <h2>Visualization</h2>
    <p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! We'll demonstrate an example of the latter below, but check out [the Mapping Demonstration tutorial]{@tutorial MappingDemonstration} for many other mappings! Hit the play button to see the what the mapping did.</p>
    <div class="part">
        <div class="result">
            <div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
        </div>
        <p>Here, we perform what's called a <strong>mapping</strong> between a range of frequency bins, or a single frequency bin, and the width property of the <code>div</code> element. We can then define a multitude of parameters to specify how the mapping will work. Following is the code that produced the example above with comment annotations.</p>
        <pre><code class="language-js">
            ask.mappings.dimensions.width({ // The mapping function.
                element: document.getElementById("width-map-demo"), // The element this mapping applies to.
                growLower: 2, // The smallest value the width can be. 
                growUpper: 8, // The largest value the width can be.
                unit: "rem", // The unit used for the above two values.
                lowerBin: 24, // The lower bin to map to.
                upperBin: 60, // The upper bin to map to.
                visUpdateRouter: player.visUpdateRouter, // The update router to use for the mapping.
                interpolator: ask.support.easings.createEaseLinear(2.5) // The interpolation function to use.
            });
        </code></pre>
    </div>
</div>

<script>
    const ask = window.audioshowkit;
    const playlist = new ask.player.MusicPlaylist("Awesome Music");

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

    const playlistDisp = playlist.generatePlaylistElement();
    document.getElementById("playlist-display").appendChild(playlistDisp);
    const player = new ask.player.VisMusicPlayer(playlist);
    const playbackCtrlsElem = document.getElementById("playback-ctrls");
    const prevElem = player.generatePreviousElement();
    const playElem = player.generatePlayElement();
    const nextElem = player.generateNextElement();
    playbackCtrlsElem.appendChild(prevElem);
    playbackCtrlsElem.appendChild(playElem);
    playbackCtrlsElem.appendChild(nextElem);

    ask.mappings.dimensions.width({
        element: document.getElementById("width-map-demo"),
        growLower: 2,
        growUpper: 8,
        unit: "rem",
        lowerBin: 24,
        upperBin: 60,
        visUpdateRouter: player.visUpdateRouter,
        interpolator: ask.support.easings.createEaseLinear(2.5)
    });
</script>