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

Changed generated control buttons to text.

Browse Source 
Fixed some JSDoc.
This commit is contained in:
Harrison Deng 2022-04-19 16:31:16 -05:00
parent fe78e7c646
commit 622a85828c
8 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.vscode/tasks.json vendored Normal file
View File

@ -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"
]
}
]
}

4
src/mappings/dimensions.js
View File

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

2
src/mappings/numeric.js
View File

@ -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...");

4
src/mappings/text.js
View File

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

9
src/player/MusicPlayer.js
View File

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

10
src/player/MusicPlaylist.js
View File

@ -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().textContent = music.author;
row.insertCell().innerText = music.displayName;
row.insertCell().innerText = music.author;
};
for (const music of this) {
insertMusic(music);

0
src/styles/music-player.css Normal file
View File

34
src/styles/musicPlayer.css
View File

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