From 5c8caba30cf9a808828d53a8a1a831db94e97b0e Mon Sep 17 00:00:00 2001 From: Harrison Deng Date: Tue, 19 Apr 2022 18:14:00 -0500 Subject: [PATCH] Improved the visual music player tutorial page stylings. --- tutorials/VisMusicPlayer.html | 143 ++++++++++++++++++---------------- tutorials/assets/css/main.css | 4 + 2 files changed, 80 insertions(+), 67 deletions(-) diff --git a/tutorials/VisMusicPlayer.html b/tutorials/VisMusicPlayer.html index e1c0901..d7f98ec 100644 --- a/tutorials/VisMusicPlayer.html +++ b/tutorials/VisMusicPlayer.html @@ -8,7 +8,7 @@ -
+

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: @@ -17,8 +17,8 @@
  • 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.

    
@@ -26,75 +26,84 @@
             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.

    -
    + +
    +
    +

    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.

    -
    -
    +

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

    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.

    -
    -
    +
    +

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

    -
    -
    +
    +

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