Removed express and public folder.
This commit is contained in:
parent
77b10be62c
commit
fa1ba87221
9
app.js
9
app.js
@ -1,9 +0,0 @@
|
|||||||
const express = require('express')
|
|
||||||
const app = express()
|
|
||||||
const port = process.env.PORT || 5000
|
|
||||||
|
|
||||||
app.use(express.static("pub"));
|
|
||||||
|
|
||||||
app.listen(port, () => {
|
|
||||||
console.log(`Static express server listening on port ${port}`)
|
|
||||||
});
|
|
||||||
Binary file not shown.
@ -1,54 +0,0 @@
|
|||||||
"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;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
"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] + ")";
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
"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);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user