audioshowkit/tutorials/VisMusicPlayer.html

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 width, height, and other dimensions related 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 color in the {@link module:mappings/coloring} 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. We also added the playlist display to show you which song you're listening to.

Visualization

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.

Here, we 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.

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