Changed generated control buttons to text.

Fixed some JSDoc.

.vscode/tasks.json

@@ -0,0 +1,36 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch:docs",
+			"group": "build",
+			"problemMatcher": [],
+			"label": "npm: watch:docs",
+			"detail": "nodemon --watch dist/ --watch tutorials/ --watch src/ --exec 'npm run docs' -e js,mjs,json,htm,html,xml,markdown,md,xhtml --ignore ./tutorials/assets/js/audioshowkit.js"
+		},
+		{
+			"type": "npm",
+			"script": "watch:lib",
+			"group": "build",
+			"problemMatcher": [],
+			"label": "npm: watch:lib",
+			"detail": "webpack --watch --config webpack.dev.cjs"
+		},
+		{
+			"type": "npm",
+			"script": "serve:docs",
+			"problemMatcher": [],
+			"label": "npm: serve:docs",
+			"detail": "cd ./docs && live-server"
+		},
+		{
+			"label": "Live Development",
+			"dependsOn": [
+				"npm: watch:docs",
+				"npm: watch:lib",
+				"npm: serve:docs"
+			]
+		}
+	]
+}

src/mappings/dimensions.js

@@ -16,7 +16,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
  * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
  * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
  * @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).
+ * @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).
  */
 export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
     const getter = () => parseInt(element.style.width) || 0;
@@ -54,7 +54,7 @@ export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpd
  * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
  * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
  * @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).
+ * @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).
  */
 export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
     const getter = () => parseInt(element.style.height) || 0;

src/mappings/numeric.js

@@ -69,7 +69,7 @@ export function mapRangedAvgNumerical({ minVal, maxVal, lowerBin = undefined, up
  * @param {module:support/easings~interpolator} conf.interpolator The interpolation function to use.
  * @param {VisUpdateRouter} conf.visUpdateRouter The update manager to map to.
  * @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.
+ * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}} The bin listener that was added.
  */
 export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpolator, visUpdateRouter, reversed = false }) {
     console.log("mapping numerical...");

src/mappings/text.js

@@ -15,7 +15,7 @@ import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
  * @param {Function} 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: visualizerBinUpdateListener}|{lower: number, upper: number, listener: visualizerRangedUpdateListener}} The ranged listener that was added.
+ * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added.
  */
 export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
     const rgbaStr = "rgba";
@@ -61,7 +61,7 @@ export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolato
  * @param {module:support/easings~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: VisUpdateRouter.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter.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).
  */
 export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
     const getter = () => parseInt(element.style.fontSize);

src/player/MusicPlayer.js

@@ -1,4 +1,4 @@
-import "../styles/musicPlayer.css";
+import "../styles/music-player.css";
 import MusicPlaylist from "./MusicPlaylist.js";
 
 
@@ -196,10 +196,15 @@ export default class MusicPlayer {
 
         this.addEventListenerToCurrentAudio("play", () => {
             playButton.classList.add("pause");
+            playButton.innerText = "Pause";
         });
         this.addEventListenerToCurrentAudio("pause", () => {
             playButton.classList.remove("pause");
+            playButton.innerText = "Play";
         });
+
+        playButton.innerText = "Play";
+
         return playButton;
     }
 
@@ -210,6 +215,7 @@ export default class MusicPlayer {
         nextButton.addEventListener("click", () => {
             this.next();
         });
+        nextButton.innerText = "Next";
         return nextButton;
     }
 
@@ -220,6 +226,7 @@ export default class MusicPlayer {
         previousButton.addEventListener("click", () => {
             this.previous();
         });
+        previousButton.innerText = "Previous";
         return previousButton;
     }
 

src/player/MusicPlaylist.js

@@ -206,20 +206,20 @@ export default class MusicPlaylist {
 
     generatePlaylistElement() {
         const element = document.createElement("table");
-        element.createTHead().textContent = "Playlist";
+        element.createTHead().innerText = "Playlist";
         const headers = element.insertRow();
         const musicHeader = document.createElement("th");
-        musicHeader.textContent = "Music";
+        musicHeader.innerText = "Music";
         headers.appendChild(musicHeader);
         const authorHeader = document.createElement("th");
-        authorHeader.textContent = "Author";
+        authorHeader.innerText = "Author";
         headers.appendChild(authorHeader);
 
         const insertMusic = (music, musicPos = undefined) => {
             if (musicPos) musicPos++;
             const row = element.insertRow(musicPos);
-            row.insertCell().textContent = music.displayName;
+            row.insertCell().innerText = music.displayName;
-            row.insertCell().textContent = music.author;
+            row.insertCell().innerText = music.author;
         };
         for (const music of this) {
             insertMusic(music);

src/styles/musicPlayer.css

@@ -1,34 +0,0 @@
-.player.play-btn {
-    box-sizing: border-box;
-    height: 48px;
-    width: 48;
-    transition: 80ms all ease;
-    will-change: border-width;
-    cursor: pointer;
-    border-color: transparent transparent transparent black;
-
-    border-style: solid;
-    border-width: 24px 0px 24px 48px;
-}
-
-.player.play-btn.pause {
-    border-style: double;
-    border-width: 0px 0px 0px 60px;
-}
-
-
-.player.next {
-    border-style: none;
-    width: 48px;
-    height: 48px;
-}
-
-.player.previous {
-    border-style: none;
-    width: 48px;
-    height: 48px;
-}
-
-table.player {
-    border-collapse: collapse;
-}