3.5 KiB
Visualizing Music
This is the fun part. We can use a {@link module:player/VisualizedMusicPlayer} and a {@link module:player/MusicPlaylist} to create a music player that is like {@link module:player/MusicPlayer} but with the ability to automatically fetch the current {@link module:visualization/Visualizer}. On top of that, it then routes that visualizer data to {@link module:visualization/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:mapping/mappings}!
- Check out {@link module:patterns/canvas} for built in canvas patterns.
- We even do font size and color with the {@link module:mapping/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!