Merge branch 'master' into develop

README.md

@@ -1,3 +1,18 @@
 # AudioShowKit
 
-Is a library that makes visualizing audio data live a much simpler process.
+A library that makes visualizing audio data live a much simpler process.
+
+## Getting Started
+
+As this library has not been published as a package, the best way to use it is to go to download the latest successful build artifact which can be [found here](https://dev.sys.reslate.xyz/dev-auto/job/AudioShowKit/job/master/). This build artifact is a minified and bundled version of all the components in the library.
+
+From here, add the downloaded javascript bundle to your html as you would any other javascript file:
+```
+<script src="./audioshowkit.js" defer></script>
+```
+
+Now, any script that is loaded after the `audioshowkit.js` script loads will have access to the `audioshowkit` object. Prepared are three tutorials with demonstrations. I recommend starting with [this one](https://dev.sys.reslate.xyz/dev-auto/job/AudioShowKit/job/master/AudioShowKit_20JSDocs/).
+
+## Documentation
+
+[The documentation can be found here](https://dev.sys.reslate.xyz/dev-auto/job/AudioShowKit/job/master/AudioShowKit_20JSDocs/) along with the rest of the tutorials and demonstrations. It should be noted that the documentation is produced in the format of modules, as this library can be used modularly, or as a bundle as described above. **Please see the actual classes and global functions for the documentation as the module section is solely indended to describe the organization of the library**. To elaborate, any component that is described in the documentation can be found in the `audioshowkit` object by replacing the `/` in the module path with `.`. In other words, `mappings/dimensions` becomes `audioshowkit.mappings.dimensions`.

src/mappings/text.js

@@ -1,4 +1,5 @@
 import { parseColor, rgbaToHexRgba } from "../support/colors.js";
+import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
 import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
 
 
@@ -9,11 +10,11 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
  * @param {HTMLElement} rgbaMapConfiguration.element The element whose text's red value should be mapped.
  * @param {number} rgbaMapConfiguration.color Where r for red, g, for green, b for blue, and a for alpha.
  * @param {number} rgbaMapConfiguration.lowerBin The lower bound of the bins to be mapped.
- * @param {VisualizerUpdateManager} rgbaMapConfiguration.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
+ * @param {VisUpdateRouter} rgbaMapConfiguration.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
  * @param {interpolator} rgbaMapConfiguration.interpolator The interpolation function to use.
  * @param {number} [rgbaMapConfiguration.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
  * @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.
+ * @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 }) {
     const rgbaStr = "rgba";
@@ -55,11 +56,11 @@ function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, uppe
  * @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
  * @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
  * @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
- * @param {VisualizerUpdateManager} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
+ * @param {VisUpdateRouter} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
  * @param {interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next.
  * @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin.
  * @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).
+ * @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 }) {
     const getter = () => parseInt(element.style.fontSize);

src/player/SongPlaylist.js

@@ -1,78 +0,0 @@
-import PlaylistSong from "./PlaylistSong";
-
-/**
- * A playlist that holds a multitude of songs.
- */
-export default class SongPlaylist {
-
-    /**
-     * Instantiates a playlist for songs.
-     * 
-     * @param {string} name The name of the playlist.
-     */
-    constructor(name) {
-        this._list = [];
-        this._name = name;
-        this._current = 0;
-    }
-
-    /**
-     * 
-     * @returns {string} the name of the string.
-     */
-    getName() {
-        return this._name;
-    }
-
-    /**
-     * 
-     * @param {number} index the index of the song to retrieve.
-     * @returns {PlaylistSong} the song at the given index.
-     */
-    songAtIndex(index) {
-        if (index >= this._list.length) {
-            return null;
-        }
-        return this.list[index];
-    }
-
-    songsWithName(name) {
-        return this._list.filter((item) => item.getDisplayName() == name);
-    }
-
-    add(url, name, author) {
-        this._list.push(new PlaylistSong(url, name, author, this, this._list.length));
-    }
-
-    remove(index) {
-        if (index >= this._list.length) {
-            return null;
-        }
-        let removed = this._list.splice(index, 1);
-        if (removed.length > 0) {
-            return removed[0];
-        }
-    }
-
-    findSongIndex(name) {
-        // TODO: Could probably be optimized.
-        return this._list.findIndex((item) => item.getDisplayName() == name);
-    }
-
-    /**
-     * 
-     * @returns {number} total number of songs in this playlist.
-     */
-    total() {
-        return this._list.length;
-    }
-
-    /**
-     * Unloads the audio data of all songs in this playlist.
-     */
-    unloadAllAudio() {
-        this._list.forEach(playlistSong => {
-            playlistSong.unloadAudio();
-        });
-    }
-}