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.</p>
    <div class="result">
        <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! Remember to hit the play button above to see the mappings in effect!</p>
    <div class="part">
        <h3>Mapping Width</h3>
        <p>The first one here shows mapping the width.</p>
        <div class="result">
            <div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
        </div>
        <p>To do this, we need to 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">
            const widthElem = document.getElementById("width-map-demo"); // selecting an element.
            ask.mappings.dimensions.width({ // the mapping function for width.
                element: widthElem, // the element to map.
                growLower: 2, // the minimum width
                growUpper: 8, // the maximum width
                unit: "rem", // the units the minimum and maximum are described in.
                lowerBin: 24, // the lower frequency bin.
                upperBin: 80, // the upper frequency bin.
                visUpdateRouter: player.visUpdateRouter, // the visualizer to use (we got ours from the VisMusicPlayer).
                interpolator: ask.support.easings.createEaseLinear(2.5) // an interpolation function to make transitions between frames cleaner.
            });
        </code></pre>
    </div>
    <div class="part">
        <h3>Mapping Height</h3>
        <p>This next one does the same, except with height.</p>
        <div class="result" style="height: 10rem;">
            <div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
        </div>
        <pre><code class="language-js">
            const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called.
            ask.mappings.dimensions.height({
                element: heightElem,
                growLower: 2, // height smallest can be 2 rem, tallest can be 8 rem.
                growUpper: 8,
                unit: "rem",
                lowerBin: 80, // Changed the bin range just for fun.
                upperBin: 120,
                visUpdateRouter: player.visUpdateRouter,
                interpolator: ask.support.easings.createEaseLinear(2.5)
            });
        </code></pre>
    </div>
    <div class="part">
        <h3>Mapping Multiple Style Properties</h3>
        <p>What's that? you want multiple mappings on one? Here it is!</p>
        <div class="result" style="height: 10rem;">
            <div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
        </div>
        <pre><code class="language-js">
            const squareElem = document.getElementById("square-map-demo"); // Same stuff as before..
            const squareElemConf = { // Use an object for commonly used mappings.
                element: squareElem,
                growLower: 0.5,
                growUpper: 8,
                unit: "rem",
                lowerBin: 128,
                upperBin: 160,
                visUpdateRouter: player.visUpdateRouter,
                interpolator: ask.support.easings.createEaseLinear(2.5)
            }
            ask.mappings.dimensions.width(squareElemConf); // Apply them easily!
            ask.mappings.dimensions.height(squareElemConf);
        </code></pre>
    </div>
    <div class="part">
        <h3>Mapping Font Color</h3>
        <p>Now for a bit more of an eccentric mapping, you can map the color of a font to the music!</p>
        <div class="result">
            <div id="font-color-rgba-map-demo">
                <strong>Hello colors!</strong>
            </div>
        </div>
        <pre><code class="language-js">
            const fontColorRgbaElem = document.getElementById("font-color-rgba-map-demo");
            ask.mappings.coloring.fontColorRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
                element: fontColorRgbaElem, // The element to map (same as above examples).
                select: "r", // Choose the red component.
                lowerBin: 128, // All other values are what we've seen above.
                upperBin: 160,
                visUpdateRouter: player.visUpdateRouter,
                interpolator: ask.support.easings.createEaseLinear(2.5)
            });
        </code></pre>
    </div>
    <p>In the same vein of mapping, we can also map HSL values. If you haven't heard of HSL values, you can read up about it <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">anywhere online really</a>, but essentially, it's another way of describing a color where a hue is used to describe a color, and then the color is adjusted by its saturation and lightness. Importantly for your case, it may make it easier to achieve the type of dynamic color mapping you're looking for (potentially when used in conjunction with any of RGBA components).</p>
    <div class="result">
        <div id="font-color-hsla-map-demo">
            <strong>Hello more colors!</strong>
        </div>
    </div>
    <pre><code class="language-js">
        const fontColorHslElem = document.getElementById("font-color-hsla-map-demo");
        ask.mappings.coloring.fontColorHsla({ // Similar to the rgba example, except now with hsla.
            element: fontColorHslElem,
            select: "h", // Selecting the "hue" component.
            lowerBin: 200,
            upperBin: 220,
            visUpdateRouter: player.visUpdateRouter,
            interpolator: ask.support.easings.createEaseLinear(2.5)
        })
    </code></pre>

    <div class="part">
        <h3>Mapping Background Color</h3>
        <p>This is kind of like the one for fonts, except, instead, for background colors!</p>
        <div class="result">
            <div id="bg-color-map-demo">
            </div>
        </div>
    </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");

    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);

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

    const heightElem = document.getElementById("height-map-demo");
    ask.mappings.dimensions.height({
        element: heightElem,
        growLower: 2,
        growUpper: 8,
        unit: "rem",
        lowerBin: 80,
        upperBin: 120,
        visUpdateRouter: player.visUpdateRouter,
        interpolator: ask.support.easings.createEaseLinear(2.5)
    });

    const squareElem = document.getElementById("square-map-demo");
    const squareElemConf = {
        element: squareElem,
        growLower: 0.5,
        growUpper: 8,
        unit: "rem",
        lowerBin: 128,
        upperBin: 160,
        visUpdateRouter: player.visUpdateRouter,
        interpolator: ask.support.easings.createEaseLinear(2.5)
    }
    ask.mappings.dimensions.width(squareElemConf);
    ask.mappings.dimensions.height(squareElemConf);

    const fontColorRgbaElem = document.getElementById("font-color-rgba-map-demo");
    ask.mappings.coloring.fontColorRgba({
        element: fontColorRgbaElem,
        select: "r",
        lowerBin: 128,
        upperBin: 160,
        visUpdateRouter: player.visUpdateRouter,
        interpolator: ask.support.easings.createEaseLinear(2.5)
    });

    const fontColorHslElem = document.getElementById("font-color-hsla-map-demo");
    ask.mappings.coloring.fontColorHsla({
        element: fontColorHslElem,
        select: "h",
        lowerBin: 200,
        upperBin: 220,
        visUpdateRouter: player.visUpdateRouter,
        interpolator: ask.support.easings.createEaseLinear(2.5)
    })
</script>