audioshowkit/tutorials/VisMusicPlayer.html

7.5 KiB

<html lang="en"> <head> </head>

Visualizing Music

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.

This library comes with a variety of mapping tools:
  • Want to map ranges of frequency bins to a plethora of element style properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!
  • Check out {@link module:patterns/canvas} for built in canvas patterns.
  • We even do font size and color with the {@link module:mappings/text} module!

Instantiation

Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.


            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.
        

Playback

Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information.

Visualization

The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements!

The first one here shows mapping the width.

To do this, we need to perform what's called a mapping between a range of frequency bins, or a single frequency bin, and the width property of the div 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.


            const widthElem = document.getElementById("width-map-demo"); // selecting an element.
            ask.mappings.dimensions.mapWidth({ // 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.
            });
        

This next one does the same, except with height.


            const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called.
            ask.mappings.dimensions.mapHeight({
                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)
            });
        

What's that? you want multiple mappings on one?

Of course it's possible


            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.mapWidth(squareElemConf); // Apply them easily!
            ask.mappings.dimensions.mapHeight(squareElemConf);
        
</html>