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! Remember to hit the play button above to see the mappings in effect!

Mapping Width

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

Mapping Height

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

Mapping Multiple Style Properties

What's that? you want multiple mappings on one? Here it is!


                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>

8.1 KiB Raw Blame History