diff --git a/src/mappings/dimensions.js b/src/mappings/dimensions.js index e8dc003..422bd56 100644 --- a/src/mappings/dimensions.js +++ b/src/mappings/dimensions.js @@ -1,6 +1,7 @@ import VisUpdateRouter from "../visualization/VisUpdateRouter.js"; import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; +/**@module */ /** * Maps the width of an element to frequency bin(s). @@ -17,7 +18,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ -function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { +export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.width) || 0; const setter = (value) => element.style.width = value + unit; const conf = { @@ -55,7 +56,7 @@ function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRout * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ -function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { +export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.height) || 0; const setter = (value) => element.style.height = value + unit; const conf = { @@ -76,7 +77,4 @@ function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRou return mapRangedAvgNumerical(conf); } return mapBinNumerical(conf); -} - - -export { mapWidth, mapHeight }; \ No newline at end of file +} \ No newline at end of file diff --git a/src/mappings/numeric.js b/src/mappings/numeric.js index 86b8221..467a752 100644 --- a/src/mappings/numeric.js +++ b/src/mappings/numeric.js @@ -1,5 +1,7 @@ import VisUpdateRouter from "../visualization/VisUpdateRouter.js"; +/**@module */ + /** * * @callback numericalGetter @@ -28,7 +30,7 @@ import VisUpdateRouter from "../visualization/VisUpdateRouter.js"; * @param {boolean} [conf.reversed = false] If true, then high amplitudes will be mapped to low values and vice versa. * @returns {{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} An object containing the lower and upper bounds for the range of a listener, which is also in the object. */ -function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateRouter, reversed = false }) { +export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateRouter, reversed = false }) { console.log("mapping average numerical."); const rangedListener = { lower: lowerBin, @@ -69,7 +71,7 @@ function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, * @param {boolean} [conf.reversed] If true, then high amplitudes will be mapped to lower values and vice versa. * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}} The bin listener that was added. */ -function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) { +export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) { console.log("mapping numerical..."); const listener = { bin: bin, @@ -84,7 +86,4 @@ function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, vi return listener; } return null; // Technically doesn't occur since the functions are anonymous? -} - - -export { mapRangedAvgNumerical, mapBinNumerical }; \ No newline at end of file +} \ No newline at end of file diff --git a/src/mappings/text.js b/src/mappings/text.js index 012fe43..43284c1 100644 --- a/src/mappings/text.js +++ b/src/mappings/text.js @@ -2,6 +2,7 @@ import { parseColor, rgbaToHexRgba } from "../support/colors.js"; import VisUpdateRouter from "../visualization/VisUpdateRouter.js"; import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; +/**@module */ /** * Maps the red component of the text color to a certain range of bins. @@ -16,7 +17,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js"; * @param {boolean} [rgbaMapConfiguration.reversed=true] If true, then the quieter, the greater the red value. * @returns {{bin: number, listener: visualizerBinUpdateListener}|{lower: number, upper: number, listener: visualizerRangedUpdateListener}} The ranged listener that was added. */ -function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { +export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const rgbaStr = "rgba"; color = rgbaStr.indexOf(color); if (color < 0) throw new Error("Invalid color parameter provided."); @@ -62,7 +63,7 @@ function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, uppe * @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa. * @returns {{bin: number, listener: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise). */ -function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { +export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) { const getter = () => parseInt(element.style.fontSize); const setter = (value) => element.style.fontSize = value + unit; const conf = { @@ -84,7 +85,4 @@ function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateR return mapBinNumerical(conf); } -// TODO: Future: map hue - - -export { mapRgba, mapFontSize }; \ No newline at end of file +// TODO: Future: map hue \ No newline at end of file diff --git a/src/patterns/canvas.js b/src/patterns/canvas.js index bd12317..fd79641 100644 --- a/src/patterns/canvas.js +++ b/src/patterns/canvas.js @@ -1,12 +1,14 @@ import Visualizer from "../visualization/Visualizer.js"; +/**@module */ + /** * Accepts a canvas and uses the entire canvas to draw a horizontal visualizer. * * @param {HTMLCanvasElement} canvasElement the canvas element to use to draw this horizontal visualizer. * @param {Visualizer} visualizer the visualizer in which the data to display is obtained. */ -function horizontalVisualizer(canvasElement, visualizer) { +export function horizontalVisualizer(canvasElement, visualizer) { let _width = canvasElement.width; let _height = canvasElement.height; let _canvasCtx = canvasElement.getContext("2d"); @@ -24,7 +26,4 @@ function horizontalVisualizer(canvasElement, visualizer) { }); }; _visualizer.addUpdateListener(update); -} - - -export { horizontalVisualizer }; \ No newline at end of file +} \ No newline at end of file diff --git a/src/support/colors.js b/src/support/colors.js index a6cb669..aa5cdf2 100644 --- a/src/support/colors.js +++ b/src/support/colors.js @@ -1,3 +1,4 @@ +/**@module */ /** * Converts from rgba hex value to an array of four numbers representing r, g, b, and a respectively. @@ -5,7 +6,7 @@ * @param {string} hex the hex value. * @returns {number[]} the resulting components of the hex value. */ -function rgbaHexToRgba(hex) { +export function rgbaHexToRgba(hex) { if (hex.startsWith("#")) { hex = hex.substring(1); if (hex.length > 8) { @@ -31,7 +32,7 @@ function rgbaHexToRgba(hex) { * @param {string} hex the hex value. * @returns {number[]} the resulting r, g, and b components. */ -function rgbHexToRgba(hex) { +export function rgbHexToRgba(hex) { const result = rgbaHexToRgba(hex + "FF"); return result; } @@ -42,7 +43,7 @@ function rgbHexToRgba(hex) { * @param {string} rgba The CSS rgba(r,g,b,a) call. * @returns {number[]} the rgba components. */ -function cssRgbaToRgba(rgba) { +export function cssRgbaToRgba(rgba) { rgba = rgba.replaceAll(" ", ""); const cssRgbaRegex = /rgba\((\d+),(\d+),(\d+),(\d+)\)/; try { @@ -59,7 +60,7 @@ function cssRgbaToRgba(rgba) { * @param {string} rgb The CSS rgb(r,g,b) call. * @returns {number[]} the rgba components. */ -function cssRgbToRgba(rgb) { +export function cssRgbToRgba(rgb) { rgb = rgb.replaceAll(" ", ""); const cssRgbRegex = /rgb\((\d+),(\d+),(\d+)\)/; try { @@ -76,7 +77,7 @@ function cssRgbToRgba(rgb) { * @param {number[]} rgba an array with red, green, blue, and alpha components in that order. * @returns {string} The resulting hex value. */ -function rgbaToHexRgba(rgba) { +export function rgbaToHexRgba(rgba) { const filler = (hex) => hex.length < 2 ? "0" + hex : hex; return "#" + filler(rgba[0].toString(16)) + filler(rgba[1].toString(16)) + filler(rgba[2].toString(16)) + filler(rgba[3].toString(16)); } @@ -90,7 +91,7 @@ function rgbaToHexRgba(rgba) { * @param {string} color The string that contains the color information. * @returns {number[]} an array that contains the r, g, b and a components. */ -function parseColor(color) { +export function parseColor(color) { if (color.startsWith("rgba(")) { return cssRgbaToRgba(color); } else if (color.startsWith("rgb(")) { @@ -104,6 +105,3 @@ function parseColor(color) { } throw new Error("Could not parse to an rgba value."); } - - -export { rgbaHexToRgba, rgbHexToRgba, cssRgbaToRgba, cssRgbToRgba, rgbaToHexRgba, parseColor }; \ No newline at end of file diff --git a/src/support/easings.js b/src/support/easings.js index a93f71c..772ac75 100644 --- a/src/support/easings.js +++ b/src/support/easings.js @@ -1,3 +1,4 @@ +/**@module */ /** * @callback interpolator @@ -14,7 +15,7 @@ * @param {number} rate the number of frequency values to shift by per second. * @returns {interpolator} the interpolation function with the given rate. */ -function createEaseLinear(rate) { +export function createEaseLinear(rate) { return (current, dest, frameDelta) => { if (dest < current) { const res = current - (rate * frameDelta); @@ -26,5 +27,3 @@ function createEaseLinear(rate) { }; } - -export { createEaseLinear }; \ No newline at end of file diff --git a/tutorials/MusicPlayer.html b/tutorials/MusicPlayer.html index 65ddf1a..c4a5b35 100644 --- a/tutorials/MusicPlayer.html +++ b/tutorials/MusicPlayer.html @@ -10,11 +10,11 @@

Creating a Music Player

-

One of the most basic principles behind AudioShowKit is the {@link module:player/MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.

+

One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.

Instantiating a Music Player

-

Instantiating a music player requires a {@link module:player/MusicPlaylist}. See the [MusicPlaylist tutorial]{@tutorial MusicPlaylist} for information on how to get one of those! Once you have one, you can proceed with instantiating a Music Player.

+

Instantiating a music player requires a {@link MusicPlaylist}. See the [MusicPlaylist tutorial]{@tutorial MusicPlaylist} for information on how to get one of those! Once you have one, you can proceed with instantiating a Music Player.


             const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
             const playlist = previousPlaylist; // We are assuming you have a playlist ready.
diff --git a/tutorials/MusicPlaylist.html b/tutorials/MusicPlaylist.html
index 3afa416..a022a36 100644
--- a/tutorials/MusicPlaylist.html
+++ b/tutorials/MusicPlaylist.html
@@ -11,7 +11,7 @@
     

Creating a Music Playlist

- A music playlist is a list of {@link module:player/Music} which maintains metadata about the playlist, such as the length, and the name of the playlist. It also keeps track of an index for a position in the playlist. + A music playlist is a list of {@link Music} which maintains metadata about the playlist, such as the length, and the name of the playlist. It also keeps track of an index for a position in the playlist.

@@ -35,7 +35,7 @@ playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
-

If for whatever reason, you decided to instantiate your own {@link module:player/Music}, that's okay too!

+

If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!


             // Still using the same context from the instantiation example...
 
diff --git a/tutorials/VisMusicPlayer.html b/tutorials/VisMusicPlayer.html
index 000029f..4671055 100644
--- a/tutorials/VisMusicPlayer.html
+++ b/tutorials/VisMusicPlayer.html
@@ -10,12 +10,12 @@
 
     

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 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:mapping/mappings}!
  • +
  • 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:mapping/text} module!
  • +
  • We even do font size and color with the {@link module:mappings/text} module!