ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redefined modules for some files.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-18 18:23:12 -05:00
parent d466aa8bdd
commit 725a08ea8f
9 changed files with 33 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/mappings/dimensions.js
View File

@ -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 = {
@ -77,6 +78,3 @@ function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRou
}
return mapBinNumerical(conf);
}
export { mapWidth, mapHeight };

9
src/mappings/numeric.js
View File

@ -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,
@ -85,6 +87,3 @@ function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, vi
}
return null; // Technically doesn't occur since the functions are anonymous?
}
export { mapRangedAvgNumerical, mapBinNumerical };

8
src/mappings/text.js
View File

@ -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 = {
@ -85,6 +86,3 @@ function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateR
}
// TODO: Future: map hue
export { mapRgba, mapFontSize };

7
src/patterns/canvas.js
View File

@ -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");
@ -25,6 +27,3 @@ function horizontalVisualizer(canvasElement, visualizer) {
};
_visualizer.addUpdateListener(update);
}
export { horizontalVisualizer };

16
src/support/colors.js
View File

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

5
src/support/easings.js
View File

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

4
tutorials/MusicPlayer.html
View File

@ -10,11 +10,11 @@
<script src="./assets/js/audioshowkit.js"></script>
<div>
<h1>Creating a Music Player</h1>
<p>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.</p>
<p>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.</p>
</div>
<div>
<h2>Instantiating a Music Player</h2>
<p>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.</p>
<p>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.</p>
<pre><code class="language-js">
const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
const playlist = previousPlaylist; // We are assuming you have a playlist ready.

4
tutorials/MusicPlaylist.html
View File

@ -11,7 +11,7 @@
<div>
<h1>Creating a Music Playlist</h1>
<p>
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.
</p>
</div>
<div>
@ -35,7 +35,7 @@
playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
</code></pre>
<p>If for whatever reason, you decided to instantiate your own {@link module:player/Music}, that's okay too!</p>
<p>If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!</p>
<pre><code class="language-js">
// Still using the same context from the instantiation example...

6
tutorials/VisMusicPlayer.html
View File

@ -10,12 +10,12 @@
<body>
<div>
<h1>Visualizing Music</h1>
<p>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.</p>
<p>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.</p>
This library comes with a variety of mapping tools:
<ul>
<li>Want to map ranges of frequency bins to a plethora of element style properties? Take a look at {@link module:mapping/mappings}!</li>
<li>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}!</li>
<li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li>
<li>We even do font size and color with the {@link module:mapping/text} module!</li>
<li>We even do font size and color with the {@link module:mappings/text} module!</li>
</ul>
</div>
<div>