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

Added module tags and removed unecessary helper functions.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-18 07:22:22 -05:00
parent 8300bbe00c
commit c87a4d9c49
18 changed files with 105 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
audioshowkit/.esdoc.json
View File

@ -1,27 +0,0 @@
{
"source": "./src",
"destination": "./docs",
"plugins": [
{
"name": "esdoc-standard-plugin",
"option": {
"test": {
"source": "./tests/",
"interfaces": [
"describe",
"it",
"context",
"suite",
"test"
],
"includes": [
"(spec|Spec|test|Test)\\.js$"
],
"excludes": [
"\\.config\\.js$"
]
}
}
}
]
}

10
audioshowkit/src/mapping/dimensions.js
View File

@ -1,6 +1,7 @@
import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
/**
* Maps the width of an element to frequency bin(s).
*
@ -16,7 +17,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: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => element.style.width;
const setter = (value) => element.style.width = value + unit;
const conf = {
@ -54,7 +55,7 @@ export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpd
* @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => element.style.height;
const setter = (value) => element.style.height = value + unit;
const conf = {
@ -75,4 +76,7 @@ export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUp
return mapRangedAvgNumerical(conf);
}
return mapBinNumerical(conf);
}
}
/**@module */
export { mapWidth, mapHeight };

1
audioshowkit/src/mapping/mappings.js
View File

@ -1,4 +1,5 @@
import * as dimensions from "./dimensions.js";
import * as numeric from "./numeric.js";
/**@module */
export { dimensions, numeric };

9
audioshowkit/src/mapping/numeric.js
View File

@ -28,7 +28,7 @@
* @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: VisualizerUpdateManager.visualizerRangedUpdateListener}} An object containing the lower and upper bounds for the range of a listener, which is also in the object.
*/
export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, upperBin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
const rangedListener = {
lower: lowerBin,
upper: upperBin,
@ -67,7 +67,7 @@ export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, up
* @param {boolean} [conf.reversed] If true, then high amplitudes will be mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}} The bin listener that was added.
*/
export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateManager, reversed = false }) {
const listener = {
bin: bin,
listener: (timeDelta, amp) => {
@ -81,4 +81,7 @@ export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpola
return listener;
}
return null; // Technically doesn't occur since the functions are anonymous?
}
}
/**@module */
export { mapRangedAvgNumerical, mapBinNumerical };

9
audioshowkit/src/mapping/text.js
View File

@ -15,7 +15,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: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: visualizerRangedUpdateListener}} The ranged listener that was added.
*/
export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
function mapRgba({ element, color, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const rgbaStr = "rgba";
color = rgbaStr.indexOf(color);
if (color < 0) throw new Error("Invalid color parameter provided.");
@ -58,7 +58,7 @@ export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolat
* @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
* @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
*/
export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
const getter = () => parseInt(element.style.fontSize);
const setter = (value) => element.style.fontSize = value + unit;
const conf = {
@ -80,4 +80,7 @@ export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, vis
return mapBinNumerical(conf);
}
// TODO: Future: map hue
// TODO: Future: map hue
/**@module */
export { mapRgba, mapFontSize };

7
audioshowkit/src/patterns/canvas.js
View File

@ -6,7 +6,7 @@ import Visualizer from "../visualization/Visualizer.js";
* @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.
*/
export function horizontalVisualizer(canvasElement, visualizer) {
function horizontalVisualizer(canvasElement, visualizer) {
let _width = canvasElement.width;
let _height = canvasElement.height;
let _canvasCtx = canvasElement.getContext("2d");
@ -24,4 +24,7 @@ export function horizontalVisualizer(canvasElement, visualizer) {
});
};
_visualizer.addUpdateListener(update);
}
}
/**@module */
export { horizontalVisualizer };

25
audioshowkit/src/player/PlaylistSong.js
View File

@ -1,17 +1,17 @@
import Visualizer from "../visualization/Visualizer.js";
/**@module */
/**
* @callback AudioEventCallback
* @param {HTMLAudioElement} audio
*/
/**
* A song with metadata that can be used as part of a {@link SongPlaylist}.
*
*/
export default class PlayListSong {
#displayName;
#author;
#url;
#audio;
#visualizer;
#ready = false;
/**
* Constructs a song for a {@link SongPlaylist}.
*
@ -24,11 +24,12 @@ export default class PlayListSong {
this.#author = author;
this.#url = url;
}
/**
* @callback AudioEventCallback
* @param {HTMLAudioElement} audio
*/
#displayName;
#author;
#url;
#audio;
#visualizer;
#ready = false;
/**
*

18
audioshowkit/src/player/SongPlayer.js
View File

@ -2,6 +2,14 @@ import "../styles/songPlayer.css";
import PlayListSong from "./PlaylistSong.js";
import SongPlaylist from "./SongPlaylist.js";
/**@module */
/**
* @callback changeListener
* @param {*} old the previous value.
* @param {*} current the the current (new) value.
*/
/**
* A player that keeps track of global properties for playback as well as traversing a playlist. Additionally keeps track of song audio data and attempts to reduce memory usage when possible.
*/
@ -240,12 +248,6 @@ export default class SongPlayer {
return this.#playlist.songAtIndex(this.#current);
}
/**
* @callback changeListener
* @param {*} old the previous value.
* @param {*} current the the current (new) value.
*/
/**
*
* @param {changeListener} listener the listener to receive the updates.
@ -323,7 +325,7 @@ export default class SongPlayer {
/**
*
* @param {string} type the type of the listener on the {@link HTMLAudioElement}.
* @param {EventListener|EventListenerObject} eventListener the event listener.
* @param {Function} eventListener the event listener.
* @returns {boolean} true if and only if successfully registered event listener.
*/
addEventListenerToCurrentAudio(type, eventListener) {
@ -341,7 +343,7 @@ export default class SongPlayer {
/**
*
* @param {string} type the type of the listener on the {@link HTMLAudioElement}.
* @param {EventListener|EventListenerObject} eventListener the event listener.
* @param {Function} eventListener the event listener.
* @returns {boolean} true if and only if the event listener was successfully added.
*/
removeEventListenerFromCurrentAudio(type, eventListener) {

2
audioshowkit/src/player/SongPlaylist.js
View File

@ -1,5 +1,7 @@
import PlaylistSong from "./PlaylistSong.js";
/**@module */
/**
* A playlist that holds a multitude of songs in the form of {@link PlaylistSong}.
*/

5
audioshowkit/src/player/VisualizedSongPlayer.js
View File

@ -3,12 +3,13 @@ import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js
import SongPlayer from "./SongPlayer.js";
import SongPlaylist from "./SongPlaylist.js";
/**@module */
/**
* A song player that provides easier access to the current songs visualizer data.
*
* Additionally, automatically re-binds all the visualizer update listeners for song changes.
*
* Automatically loads the songs.
* @augments SongPlayer
*/
export default class VisualizedSongPlayer extends SongPlayer {
#fftSize = 1024;

48
audioshowkit/src/player/player.js
View File

@ -3,49 +3,5 @@ import SongPlaylist from "./SongPlaylist.js";
import VisualizedSongPlayer from "./VisualizedSongPlayer.js";
import PlayListSong from "./PlaylistSong.js";
/**
* Instantiates a song player with a given playlist.
*
* @see SongPlayer for more information about the returned object.
* @param {SongPlaylist} playlist the playlist this player will play through.
* @returns {SongPlayer} the instantiated song player.
*/
export function createSongPlayer(playlist) {
return new SongPlayer(playlist);
}
/**
* Instantiates a song playlist.
*
* @see SongPlaylist for more information about the returned object.
* @param {string} name the name of the playlist.
* @returns {SongPlaylist} the instantiated song playlist.
*/
export function createSongPlaylist(name) {
return new SongPlaylist(name);
}
/**
* Instantiates a song player that manages the visualizers for individual songs, as well as the listeners for the visualizations.
*
* @see VisualizedSongPlayer for more information about the returned object.
* @param {SongPlaylist} playlist the playlist this visualized song player will play through.
* @param {number} [fftSize=1024] the FFT window size.
* @returns {VisualizedSongPlayer} a song player capable of retrieving the visualizer for the current playing song.
*/
export function createVisualizedSongPlayer(playlist, fftSize = 1024) {
return new VisualizedSongPlayer(playlist, fftSize);
}
/**
* Instantiates a playlist song.
*
* @see PlaylistSong for more information about the returned object.
* @param {string} url The url at which the audio for the song can be retrieved.
* @param {string} name The name of the song.
* @param {string} author The name of the author(s).
* @returns {PlayListSong} The playlist song that is instantiated.
*/
export function createPlaylistSong(url, name, author) {
return new PlayListSong(url, name, author);
}
/**@module */
export { SongPlayer, SongPlaylist, VisualizedSongPlayer, PlayListSong };

21
audioshowkit/src/support/colors.js
View File

@ -1,11 +1,11 @@
/**
* The rg
* Converts from rgba hex value to an array of four numbers representing r, g, b, and a respectively.
*
* @param {string} hex the hex value.
* @returns {number[]} the resulting components of the hex value.
*/
export function rgbaHexToRgba(hex) {
function rgbaHexToRgba(hex) {
if (hex.startsWith("#")) {
hex = hex.substring(1);
if (hex.length > 8) {
@ -31,17 +31,18 @@ export function rgbaHexToRgba(hex) {
* @param {string} hex the hex value.
* @returns {number[]} the resulting r, g, and b components.
*/
export function rgbHexToRgba(hex) {
function rgbHexToRgba(hex) {
const result = rgbaHexToRgba(hex + "FF");
return result;
}
/**
* Converts from the CSS rgba call to an array of four numbers representing r, g, b and a.
*
* @param {string} rgba The CSS rgba(r,g,b,a) call.
* @returns {number[]} the rgba components.
*/
export function cssRgbaToRgba(rgba) {
function cssRgbaToRgba(rgba) {
const cssRgbaRegex = /rgba\((\d+),(\d+),(\d+),(\d+)\)/;
try {
const matches = rgba.match(cssRgbaRegex);
@ -52,11 +53,12 @@ export function cssRgbaToRgba(rgba) {
}
/**
* Converts from the CSS rgb call to an array of four numbers representing r, g, b and a.
*
* @param {string} rgb The CSS rgb(r,g,b) call.
* @returns {number[]} the rgba components.
*/
export function cssRgbToRgba(rgb) {
function cssRgbToRgba(rgb) {
const cssRgbRegex = /rgb\((\d+),(\d+),(\d+)\)/;
try {
const matches = rgb.match(cssRgbRegex);
@ -72,7 +74,7 @@ export function cssRgbToRgba(rgb) {
* @param {number[]} rgba an array with red, green, blue, and alpha components in that order.
* @returns {string} The resulting hex value.
*/
export function rgbaToHexRgba(rgba) {
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));
}
@ -86,7 +88,7 @@ export 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.
*/
export function parseColor(color) {
function parseColor(color) {
if (color.startsWith("rgba(")) {
return cssRgbaToRgba(color);
} else if (color.startsWith("rgb(")) {
@ -99,4 +101,7 @@ export function parseColor(color) {
}
}
throw new Error("Could not parse to an rgba value.");
}
}
/**@module */
export { rgbaHexToRgba, rgbHexToRgba, cssRgbaToRgba, cssRgbToRgba, rgbaToHexRgba, parseColor };

7
audioshowkit/src/support/easings.js
View File

@ -14,7 +14,7 @@
* @param {number} rate the number of frequency values to shift by per second.
* @returns {interpolator} the interpolation function with the given rate.
*/
export function createEaseLinear(rate) {
function createEaseLinear(rate) {
return (current, dest, frameDelta) => {
let direction = 1;
if (dest < current) {
@ -22,4 +22,7 @@ export function createEaseLinear(rate) {
}
return current + (Math.min(rate * frameDelta, dest) * direction);
};
}
}
/**@module */
export { createEaseLinear };

1
audioshowkit/src/support/support.js
View File

@ -1,4 +1,5 @@
import * as colors from "./colors.js";
import * as easings from "./easings.js";
/**@module */
export { colors, easings };

14
audioshowkit/src/visualization/Visualizer.js
View File

@ -1,3 +1,11 @@
/**@module */
/**
* @callback visualizerUpdateListener
* @param {number} delta elapsed time since last update.
* @param {Uint8Array} bins the bins with varying frequency values.
*/
/**
* Provides a simplified access point to the frequency bins in the form of a visualization update listener.
*/
@ -11,12 +19,6 @@ export default class Visualizer {
#buffer;
#lastUpdate;
/**
* @callback visualizerUpdateListener
* @param {number} delta elapsed time since last update.
* @param {Uint8Array} bins the bins with varying frequency values.
*/
/**
*
* @param {MediaSource|HTMLMediaElement} mediaSource a media source to analyze.

29
audioshowkit/src/visualization/VisualizerUpdateManager.js
View File

@ -1,5 +1,21 @@
import Visualizer from "./Visualizer.js";
/**@module */
/**
* @callback visualizerBinUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} amplitude The amplitude of the associated bin.
* @param {number} ampDelta change in amplitude of the frequency bin.
*/
/**
* @callback visualizerRangedUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} bins the bins of the range.
*/
/**
* A visualizer update manager offers an extra layer of abstraction on top of the {@link Visualizer}'s update listener.
*
@ -50,19 +66,6 @@ export default class VisualizerUpdateManager {
visualizer.addUpdateListener(this.#visualizerListener);
}
/**
* @callback visualizerBinUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} amplitude The amplitude of the associated bin.
* @param {number} ampDelta change in amplitude of the frequency bin.
*/
/**
* @callback visualizerRangedUpdateListener
* @param {number} timeDelta elapsed time since last update.
* @param {number} bins the bins of the range.
*/
/**
* Adds a listener to a specific frequency bin.

24
audioshowkit/src/visualization/visualization.js
View File

@ -1,25 +1,5 @@
import Visualizer from "./Visualizer.js";
import VisualizerUpdateManager from "./VisualizerUpdateManager.js";
/**
* Instantiates a visualizer.
*
* @see Visualizer for information on the returned object.
* @param {HTMLMediaElement|MediaSource} mediaSource the source of audio to be visualized.
* @param {number} [fftSize=1024] the FFT window size.
* @returns {Visualizer} the visualizer with the given media source and the given FFT size.
*/
export function createVisualizer(mediaSource, fftSize = 1024) {
return new Visualizer(mediaSource, fftSize);
}
/**
* Instantiates a VisualizerUpdateManager.
*
* @see VisualizerUpdateManager for information on the returned object.
* @param {Visualizer} visualizer the visualizer this update manager manages.
* @returns {VisualizerUpdateManager} the instantiated visualizer update manager for the given visualizer.
*/
export function createVisualizerUpdateManager(visualizer) {
return new VisualizerUpdateManager(visualizer);
}
/**@module */
export { Visualizer, VisualizerUpdateManager };

6
showcase/src/js/main.js
View File

@ -1,6 +1,7 @@
console.log("Beginning showcase..");
const ask = window.audioshowkit;
// Song Player
const playlist = ask.player.createSongPlaylist("Demo playlist");
playlist.add("/audio/moments.mp3", "moments", "Lost Identities x Robbie Rosen");
playlist.add("/audio/XXI.mp3", "XXI", "QR");
@ -9,3 +10,6 @@ const playerElem = document.getElementById("player-showcase");
playerElem.appendChild(player.generatePlayElement());
playerElem.appendChild(player.generateNextElement());
playerElem.appendChild(player.generatePreviousElement());
// Visualizer