Tryna get pitch
This commit is contained in:
parent
f30115f411
commit
ede4449de8
81
src/index.js
81
src/index.js
|
@ -1,12 +1,24 @@
|
||||||
import p5 from 'p5';
|
import p5 from 'p5';
|
||||||
import 'p5/lib/addons/p5.sound';
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
const VOLUME_NORMALIZATION = 1000;
|
const VOLUME_THRESHOLD = 0;
|
||||||
const THRESHOLD = 5 / VOLUME_NORMALIZATION;
|
const FFT_SIZE = 1024;
|
||||||
|
|
||||||
function getColorValue(volume) {
|
function getColorValue(volume) {
|
||||||
return Math.floor(volume * VOLUME_NORMALIZATION * 256);
|
const normalizedVolume = volume * VOLUME_NORMALIZATION;
|
||||||
|
const color = Math.floor(normalizedVolume);
|
||||||
|
const opacity = (normalizedVolume > VOLUME_MAX ? normalizedVolume : VOLUME_MAX) / 100;
|
||||||
|
return `rgba(${color}, ${color}, ${color}, ${opacity})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRMS(spectrum) {
|
||||||
|
let rms = 0;
|
||||||
|
for (let i = 0; i < spectrum.length; i++) {
|
||||||
|
rms += spectrum[i] * spectrum[i];
|
||||||
|
}
|
||||||
|
rms /= spectrum.length;
|
||||||
|
rms = Math.sqrt(rms);
|
||||||
|
return rms;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWidth(volume) {
|
function getWidth(volume) {
|
||||||
|
@ -23,8 +35,38 @@ function getRandomY() {
|
||||||
|
|
||||||
|
|
||||||
async function main() {
|
async function main() {
|
||||||
const mic = new p5.AudioIn();
|
const audioCtx = new AudioContext();
|
||||||
mic.start();
|
const microphone = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||||
|
const analyser = new AnalyserNode(audioCtx);
|
||||||
|
|
||||||
|
let fresh = false;
|
||||||
|
let spectrum = [];
|
||||||
|
let volume = 0;
|
||||||
|
analyser.smoothingTimeConstant = 0.2;
|
||||||
|
analyser.fftSize = FFT_SIZE;
|
||||||
|
|
||||||
|
const audioProcessor = audioCtx.createScriptProcessor(FFT_SIZE*2, 1, 1);
|
||||||
|
audioProcessor.onaudioprocess = () => {
|
||||||
|
fresh = true;
|
||||||
|
// bitcount returns array which is half the FFT_SIZE
|
||||||
|
spectrum = new Uint8Array(analyser.frequencyBinCount);
|
||||||
|
|
||||||
|
// getByteFrequencyData returns amplitude for each bin
|
||||||
|
// analyser.getByteFrequencyData(spectrum);
|
||||||
|
// getByteTimeDomainData gets volumes over the sample time
|
||||||
|
// analyser.getByteTimeDomainData(self.spectrum);
|
||||||
|
|
||||||
|
volume = getRMS(spectrum);
|
||||||
|
// get peak - a hack when our volumes are low
|
||||||
|
if (volume > VOLUME_THRESHOLD) VOLUME_THRESHOLD = volume;
|
||||||
|
volume = self.vol;
|
||||||
|
}
|
||||||
|
|
||||||
|
const input = audioCtx.createMediaStreamSource(microphone);
|
||||||
|
input.connect(analyser);
|
||||||
|
analyser.connect(audioProcessor);
|
||||||
|
// audioProcessor.connect(audioCtx.destination);
|
||||||
|
|
||||||
|
|
||||||
const instance = new p5(( sketch ) => {
|
const instance = new p5(( sketch ) => {
|
||||||
sketch.setup = () => {
|
sketch.setup = () => {
|
||||||
|
@ -39,27 +81,16 @@ async function main() {
|
||||||
let bars = [];
|
let bars = [];
|
||||||
|
|
||||||
sketch.draw = () => {
|
sketch.draw = () => {
|
||||||
|
if (!fresh) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fresh = false;
|
||||||
|
|
||||||
sketch.background(0);
|
sketch.background(0);
|
||||||
|
|
||||||
const volume = mic.getLevel();
|
for (const pitch of spectrum) {
|
||||||
const x = getRandomX();
|
}
|
||||||
bars.push({
|
|
||||||
volume,
|
|
||||||
// pitch,
|
|
||||||
x,
|
|
||||||
});
|
|
||||||
|
|
||||||
const newBars = [];
|
|
||||||
for (const bar of bars) {
|
|
||||||
bar.volume = bar.volume / 1.5;
|
|
||||||
if (bar.volume <= THRESHOLD) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
drawBar(bar);
|
|
||||||
newBars.push(bar);
|
|
||||||
};
|
|
||||||
|
|
||||||
bars = newBars;
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue