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

Express server set up.

Browse Source
This commit is contained in:
Harrison Deng 2022-03-20 20:18:58 -05:00
parent 708732e842
commit c636abc4ec
5 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
server/pub/Elektronomia - Collide.mp3 Normal file
View File

Binary file not shown.

54
server/pub/audioshowkit.js Normal file
View File

@ -0,0 +1,54 @@
"use strict";
function VisualizerCore(mediaSource, fftSize = 1024) {
this._stream = mediaSource;
this._analyzing = false;
this._updateListeners = [];
this._audioCtx = new window.AudioContext();
this._source = null; // Prepare for either a MediaStream or a MediaElement.
try {
this.source = this._audioCtx.createMediaStreamSource(this._stream);
} catch (e) {
this._source = this._audioCtx.createMediaElementSource(this._stream);
}
this._analyzer = this._audioCtx.createAnalyser();
this._analyzer.fftSize = fftSize;
this._source.connect(this._analyzer);
this._analyzer.connect(this._audioCtx.destination);
this._buffer = new Uint8Array(this._analyzer.frequencyBinCount);
this.lastUpdate = null;
this.analyze = function () {
if (this._analyzing) {
return;
}
this._analyzing = true;
requestAnimationFrame(this.update);
};
let vcore = this; // since calling from requestAnimationFrame means "this" is no longer set to produced object.
this.update = function (timestamp) {
if (!vcore._analyzing) return;
requestAnimationFrame(vcore.update);
if (!vcore.lastUpdate) {
vcore.lastUpdate = timestamp;
}
let delta = timestamp - vcore.lastUpdate;
vcore._analyzer.getByteFrequencyData(vcore._buffer);
vcore._updateListeners.forEach(listener => {
listener(delta, vcore._buffer);
});
};
this.stop = function () {
this._analyzing = false;
};
this.addUpdateListener = function (listener) {
this._updateListeners.push(listener);
};
this.getNumberOfBins = function () {
return this._buffer.length;
};
}

32
server/pub/examples.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>AudioShowKit visual test</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script defer src="audioshowkit.js"></script>
<script defer src="patterns/HorizontalBar.js"></script>
<script defer src='examples.js'></script>
</head>
<body>
<h1>Hit start to see demo!</h1>
<button id="startbtn">Start.</button>
<h2>Horizontal Bar Pattern</h2>
<p>Below is a canvas that has all bin values being drawn live using the built-in horizontal bar pattern.</p>
<canvas id="horizontal">Canvases don't seem to be supported! Please try a different browser.</canvas>
<h2>Binding frequency bin values to element styles</h2>
<p>Has never been this easy! Here we bind the width of a div to a frequency bin.</p>
<div id="widthDiv"></div>
<p>Here we bind a frequency to the colour of a div.</p>
<div id="colourDiv"></div>
</body>
</html>

32
server/pub/examples.js Normal file
View File

@ -0,0 +1,32 @@
"use strict";
// We will see if the visualizers core and event systems are working correctly.
let startBtn = document.getElementById("startbtn");
startBtn.addEventListener("click", async (ev) => {
let mediaStream = new Audio("Elektronomia - Collide.mp3");
mediaStream.addEventListener("canplaythrough", (ev) => {
let visCore = new VisualizerCore(mediaStream, 128);
let coreAndEventCanvas = document.getElementById("horizontal");
coreAndEventCanvas.width = 640;
coreAndEventCanvas.height = 200;
mediaStream.play();
visCore.analyze();
bindHorizontalBar(coreAndEventCanvas, visCore); // Pre-made simple horizontal bar visualizer.
let widthDiv = document.getElementById("widthDiv");
widthDiv.style.height = "20px";
widthDiv.style.backgroundColor = "orange";
visCore.addUpdateListener((delta, bins) => {
widthDiv.style.width = bins[3] + "px";
})
let colourDiv = document.getElementById("colourDiv");
colourDiv.style.height = "20px";
visCore.addUpdateListener((delta, bins) => {
colourDiv.style.backgroundColor = "rgb(" + bins[0] + "," + bins[1] + ", " + bins[4] + ")";
})
});
});

21
server/pub/patterns/HorizontalBar.js Normal file
View File

@ -0,0 +1,21 @@
"use strict";
function bindHorizontalBar(canvasElement, visualizerCore) {
let _width = canvasElement.width;
let _height = canvasElement.height;
let _canvasCtx = canvasElement.getContext("2d");
let _visualizerCore = visualizerCore;
let update = function (delta, bins) {
_canvasCtx.clearRect(0, 0, _width, _height); // clear canvas.
let barWidth = Math.floor(_width / bins.length) - 1; // -1 for 1 pixel gap between bars.
let barIndex = 0;
bins.forEach(bin => {
let normalBin = bin / 255.0;
_canvasCtx.fillStyle = "rgb(" + 0 + "," + bin + "," + bin + ")";
let barHeight = _height * normalBin;
_canvasCtx.fillRect(barIndex * barWidth, _height - barHeight, barWidth, barHeight);
barIndex += 1;
});
};
_visualizerCore.addUpdateListener(update);
}