Commit 7fabd29d authored by Daniel Clarke's avatar Daniel Clarke

SVF example made, Analysis example includes MFCC and oct analyser

parent 292fe4b2
This diff is collapsed.
<!--
Copyright 2010, Google Inc.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="../maxiLib.js"></script>
<!-- <script src="../maxi_webAudio.js"></script> -->
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySwitchableOsc = new maximJs.maxiOsc();//
var CurrentCount;//
var myCurrentEnv;
var myOscOutput,myFilteredOutput = 0.0;//
var myEnvelope = new maximJs.maxiEnv();
var SVF = new maximJs.maxiSVF();
//Timing is in ms
myEnvelope.setAttack(1.5);
myEnvelope.setDecay(1); // Needs to be at least 1
myEnvelope.setSustain(1);
myEnvelope.setRelease(200);
SVF.setCutoff(400);
SVF.setResonance(1);
audio.play = function(){
myCurrentEnv=myEnvelope.adsr(1.,myEnvelope.trigger);
CurrentCount=Math.round(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value.
// You'll notice that these 'if' statements don't require curly braces "{}".
// This is because there is only one outcome if the statement is true.
if (CurrentCount==1) myEnvelope.trigger=1; //trigger the envelope
else myEnvelope.trigger=0;//release the envelope to make it fade out only if it's been triggered
myOscOutput=mySwitchableOsc.sawn(50) * mySwitchableOsc.sinewave(1);
// run output through this filter, and get a mixture of lowpass, bandpass, highpass and notch outputs
myFilteredOutput = SVF.play(myOscOutput, 0.8, 0, 0.1, myCurrentEnv);
this.output=myFilteredOutput;
}
</script>
</head>
<body>
<h1> Filter Example </h1>
<p>
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySwitchableOsc = new maximJs.maxiOsc();//
var CurrentCount;//
var myCurrentVolume;
var myOscOutput,myFilteredOutput;//
var myEnvelope = new maximJs.maxiEnv();
var myFilter = new maximJs.maxiFilter();
//Timing is in ms
myEnvelope.setAttack(0);
myEnvelope.setDecay(1); // Needs to be at least 1
myEnvelope.setSustain(1);
myEnvelope.setRelease(1000);
audio.play = function(){
myCurrentVolume=myEnvelope.adsr(1.,myEnvelope.trigger);
CurrentCount=Math.round(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value.
// You'll notice that these 'if' statements don't require curly braces "{}".
// This is because there is only one outcome if the statement is true.
if (CurrentCount==1) myEnvelope.trigger=1; //trigger the envelope
else myEnvelope.trigger=0;//release the envelope to make it fade out only if it's been triggered
myOscOutput=mySwitchableOsc.sawn(100);
// Below, the oscilator signals are being passed through a low pass filter.
// The middle input is the filter cutoff. It is being controlled by the envelope.
// Notice that the envelope is being amplified so that it scales between 0 and 1000.
// The last input is the resonance.
myFilteredOutput=myFilter.lores(myOscOutput,myCurrentVolume*1000,10);
this.output=myFilteredOutput;//left speaker
}
</pre>
</body></html>
......@@ -69,29 +69,73 @@ var audio = new maximJs.maxiAudio();
audio.init();
var fft = new maximJs.maxiFFT();
// var ifft = new maximJs.maxiIFFT();
// var mffc = new maximJs.maxiMFFC();
var mfcc = new maximJs.maxiMFCC();
var oct = new maximJs.maxiFFTOctaveAnalyzer();
var nAverages = 12;
// for storing fft values
/*
required as passing a vector from one class
to another isn't currently working
*/
var magnitudes = new Module.VectorFloat();
var magnitudesDB = new Module.VectorFloat();
var phases = new Module.VectorFloat();
// will store mfcc output
var mfccs = new Module.VectorDouble();
var osc = new maximJs.maxiOsc();
// if you want to play a sample...
// var samplePlayer = new maximJs.maxiSample();
// audio.loadSample("audio/beat2.wav", samplePlayer);
var fftSize = 1024;
var sampleRate = 44100;
var magMult = 6;
var count = 0;
var updateIncr = 50;
var ignoreCount = false;
var bars = [];
var barsBottom = 600;
var barsLeft = 50;
var fftDraw = {
barsBottom: 600,
barsLeft: 50,
barsSize:1,
magMult: 6
};
var mfccDraw = {
barsBottom: 350,
barsLeft: 350,
barsSize:10,
magMult: 24
};
var octDraw = {
barsBottom: 150,
barsLeft: 350,
barsSize:10,
magMult: 0.5
};
var amtAvgs = 15;
var pitchHist = [];
window.onload = setup;
function setup(){
fft.setup(fftSize, 512, 256);
// ifft.setup(fftSize, 512, 256);
// mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
oct.setup(sampleRate, fftSize/2, nAverages);
for(var i = 0; i < 13; ++i){
mfccs.push_back(0);
}
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(0);
}
// This gets the window in the browser
var canvas=document.getElementById("myCanvas");
......@@ -104,34 +148,98 @@ function setup(){
return setInterval(draw, 40);
}
audio.play = function(){
// create wave for fft
var wave = osc.square(220);
// if(samplePlayer.isReady()){
// var wave = samplePlayer.play();
// }
// process wave
if(fft.process(wave)){
fft.magsToDB();
count++; // increment counter
}
this.output = wave;
// sorry, this is not nice
Module.vectorTools.clearVectorFloat(magnitudes);
Module.vectorTools.clearVectorFloat(magnitudesDB);
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(fft.getMagnitude(i));
magnitudesDB.push_back(fft.getMagnitudeDB(i));
}
// pass magnitudes to mfcc and store in mfccs vector
mfcc.mfcc(magnitudes, mfccs);
oct.calculate(magnitudesDB);
}
this.output = wave;
}
//The stuff inside the script tag is very similar to processing code.
function draw() {
//This is basically the same as any other 2D processing draw routine.
//clear the screen
context.clearRect(0,0,700,700);
// fft
context.fillStyle="#FF0000";
context.font = "30px Arial";
context.fillText("FFT",70,200);
for(var i=0; i < fftSize / 2; i++) {
context.beginPath();
context.fillStyle="#FF0000";
context.rect(barsLeft + i, barsBottom, 1, -(fft.getMagnitude(i) * magMult));
context.rect(
fftDraw.barsLeft + i,
fftDraw.barsBottom,
fftDraw.barsSize,
-(fft.getMagnitude(i) * fftDraw.magMult));
context.fill();
context.closePath();
}
// mfcc
context.fillStyle="rgba(0, 220, 0, 0.5)"
context.font = "30px Arial";
context.fillText("MFCC",350,250);
for(var i=0; i < 13; i++) {
context.beginPath();
context.rect(
mfccDraw.barsLeft + i*mfccDraw.barsSize,
mfccDraw.barsBottom,
mfccDraw.barsSize,
(mfccs.get(i) * mfccDraw.magMult));
context.fill();
context.closePath();
}
// octave analyser
var j = 0;
for(var i=0; i < amtAvgs; ++i) {
pitchHist[i] = 0;
}
for (var i = 0; i < oct.nAverages; ++i) {
pitchHist[j] += oct.getAverage(i);
j++;
j = j % amtAvgs;
}
context.fillStyle="rgba(0, 0, 255, 0.5)"
context.font = "30px Arial";
context.fillText("OCT",350,50);
for(var i=0; i < amtAvgs; i++) {
context.beginPath();
context.rect(
octDraw.barsLeft + i*(octDraw.barsSize*1.5),
octDraw.barsBottom,
octDraw.barsSize,
-(pitchHist[i] * octDraw.magMult));
context.fill();
// context.stroke();
context.closePath();
}
}
......@@ -142,29 +250,73 @@ var audio = new maximJs.maxiAudio();
audio.init();
var fft = new maximJs.maxiFFT();
// var ifft = new maximJs.maxiIFFT();
// var mffc = new maximJs.maxiMFFC();
var mfcc = new maximJs.maxiMFCC();
var oct = new maximJs.maxiFFTOctaveAnalyzer();
var nAverages = 12;
// for storing fft values
/*
required as passing a vector from one class
to another isn't currently working
*/
var magnitudes = new Module.VectorFloat();
var magnitudesDB = new Module.VectorFloat();
var phases = new Module.VectorFloat();
// will store mfcc output
var mfccs = new Module.VectorDouble();
var osc = new maximJs.maxiOsc();
// if you want to play a sample...
// var samplePlayer = new maximJs.maxiSample();
// audio.loadSample("audio/beat2.wav", samplePlayer);
var fftSize = 1024;
var sampleRate = 44100;
var magMult = 6;
var count = 0;
var updateIncr = 50;
var ignoreCount = false;
var bars = [];
var barsBottom = 600;
var barsLeft = 50;
var fftDraw = {
barsBottom: 600,
barsLeft: 50,
barsSize:1,
magMult: 6
};
var mfccDraw = {
barsBottom: 350,
barsLeft: 350,
barsSize:10,
magMult: 24
};
var octDraw = {
barsBottom: 150,
barsLeft: 350,
barsSize:10,
magMult: 0.5
};
var amtAvgs = 15;
var pitchHist = [];
window.onload = setup;
function setup(){
fft.setup(fftSize, 512, 256);
// ifft.setup(fftSize, 512, 256);
// mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
oct.setup(sampleRate, fftSize/2, nAverages);
for(var i = 0; i < 13; ++i){
mfccs.push_back(0);
}
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(0);
}
// This gets the window in the browser
var canvas=document.getElementById("myCanvas");
......@@ -177,34 +329,98 @@ function setup(){
return setInterval(draw, 40);
}
audio.play = function(){
// create wave for fft
var wave = osc.square(220);
// if(samplePlayer.isReady()){
// var wave = samplePlayer.play();
// }
// process wave
if(fft.process(wave)){
fft.magsToDB();
count++; // increment counter
}
this.output = wave;
// sorry, this is not nice
Module.vectorTools.clearVectorFloat(magnitudes);
Module.vectorTools.clearVectorFloat(magnitudesDB);
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(fft.getMagnitude(i));
magnitudesDB.push_back(fft.getMagnitudeDB(i));
}
// pass magnitudes to mfcc and store in mfccs vector
mfcc.mfcc(magnitudes, mfccs);
oct.calculate(magnitudesDB);
}
this.output = wave;
}
//The stuff inside the script tag is very similar to processing code.
function draw() {
//This is basically the same as any other 2D processing draw routine.
//clear the screen
context.clearRect(0,0,700,700);
// fft
context.fillStyle="#FF0000";
context.font = "30px Arial";
context.fillText("FFT",70,200);
for(var i=0; i < fftSize / 2; i++) {
context.beginPath();
context.fillStyle="#FF0000";
context.rect(barsLeft + i, barsBottom, 1, -(fft.getMagnitude(i) * magMult));
context.rect(
fftDraw.barsLeft + i,
fftDraw.barsBottom,
fftDraw.barsSize,
-(fft.getMagnitude(i) * fftDraw.magMult));
context.fill();
context.closePath();
}
// mfcc
context.fillStyle="rgba(0, 220, 0, 0.5)"
context.font = "30px Arial";
context.fillText("MFCC",350,250);
for(var i=0; i < 13; i++) {
context.beginPath();
context.rect(
mfccDraw.barsLeft + i*mfccDraw.barsSize,
mfccDraw.barsBottom,
mfccDraw.barsSize,
(mfccs.get(i) * mfccDraw.magMult));
context.fill();
context.closePath();
}
// octave analyser
var j = 0;
for(var i=0; i < amtAvgs; ++i) {
pitchHist[i] = 0;
}
for (var i = 0; i < oct.nAverages; ++i) {
pitchHist[j] += oct.getAverage(i);
j++;
j = j % amtAvgs;
}
context.fillStyle="rgba(0, 0, 255, 0.5)"
context.font = "30px Arial";
context.fillText("OCT",350,50);
for(var i=0; i < amtAvgs; i++) {
context.beginPath();
context.rect(
octDraw.barsLeft + i*(octDraw.barsSize*1.5),
octDraw.barsBottom,
octDraw.barsSize,
-(pitchHist[i] * octDraw.magMult));
context.fill();
// context.stroke();
context.closePath();
}
}
......
......@@ -50,14 +50,16 @@ void maxiFFT::setup(int _fftSize, int _windowSize, int _hopSize) {
bins = fftSize / 2;
hopSize = _hopSize;
buffer = (float *) malloc(fftSize * sizeof(float));
magnitudes = (float *) malloc(bins * sizeof(float));
// magnitudes = (float *) malloc(bins * sizeof(float));
magnitudes.reserve(bins);
magnitudesDB = (float *) malloc(bins * sizeof(float));
phases = (float *) malloc(bins * sizeof(float));
// phases = (float *) malloc(bins * sizeof(float));
phases.reserve(bins);
avgPower = new float;
memset(buffer, 0, fftSize * sizeof(float));
memset(magnitudes, 0, bins * sizeof(float));
// memset(magnitudes, 0, bins * sizeof(float));
memset(magnitudesDB, 0, bins * sizeof(float));
memset(phases, 0, bins * sizeof(float));
// memset(phases, 0, bins * sizeof(float));
*avgPower = 0;
pos =windowSize - hopSize;
newFFT = 0;
......@@ -73,9 +75,9 @@ bool maxiFFT::process(float value) {
newFFT = pos == windowSize;
if (newFFT) {
#if defined(__APPLE_CC__) && !defined(_NO_VDSP)
_fft->powerSpectrum_vdsp(0, buffer, window, magnitudes, phases);
_fft->powerSpectrum_vdsp(0, buffer, window, magnitudes.data(), phases.data());
#else
_fft->powerSpectrum(0, buffer, window, magnitudes, phases);
_fft->powerSpectrum(0, buffer, window, magnitudes.data(), phases.data());
#endif
//shift buffer back by one hop size
memcpy(buffer, buffer + hopSize, (windowSize - hopSize) * sizeof(float));
......@@ -89,9 +91,9 @@ bool maxiFFT::process(float value) {
float maxiFFT::magsToDB() {
#if defined(__APPLE_CC__) && !defined(_NO_VDSP)
_fft->convToDB_vdsp(magnitudes, magnitudesDB);
_fft->convToDB_vdsp(magnitudes.data(), magnitudesDB);
#else
_fft->convToDB(magnitudes, magnitudesDB);
_fft->convToDB(magnitudes.data(), magnitudesDB);
#endif
return *magnitudesDB;
}
......@@ -122,7 +124,7 @@ float maxiFFT::spectralCentroid() {
maxiFFT::~maxiFFT() {
delete _fft;
if (buffer)
delete[] buffer,magnitudes,phases,window, avgPower, magnitudesDB;
delete[] buffer,/*magnitudes,phases,*/window, avgPower, magnitudesDB;
}
......
......@@ -46,18 +46,26 @@ class maxiFFT {
public:
maxiFFT(){
_fft = NULL;
buffer = magnitudes = phases = window = avgPower = NULL;
buffer = /* magnitudes = phases = */window = avgPower = NULL;
};
~maxiFFT();
void setup(int fftSize, int windowSize, int hopSize);
bool process(float value);
float magsToDB();
float *magnitudes, *phases, *magnitudesDB;
float /* *magnitudes, *phases, */ *magnitudesDB;
vector<float> magnitudes, phases;
float *avgPower;
int windowSize;
int hopSize;
int bins;
vector<float> getMagnitudes() const{
return magnitudes;
}
vector<float> getPhases() const{
return phases;
}
// properties (emscr)
float getMagnitude(int n){
......@@ -97,6 +105,14 @@ public:
this->bins = n;
}
void setMagnitudes(vector<float> magnitudes_){
magnitudes = magnitudes_;
}
void setPhases(vector<float> phases_){
phases = phases_;
}
//features
float spectralFlatness();
float spectralCentroid();
......
......@@ -35,6 +35,9 @@ EMSCRIPTEN_BINDINGS(my_module_maxiFFT) {
.property("windowSize", &maxiFFT::getWindowSize, &maxiFFT::setWindowSize)
.property("hopSize", &maxiFFT::getHopSize, &maxiFFT::setHopSize)
.property("bins", &maxiFFT::getNumBins, &maxiFFT::setNumBins)
.property("magnitudes", &maxiFFT::getMagnitudes, &maxiFFT::setMagnitudes)
.property("phases", &maxiFFT::getPhases, &maxiFFT::setPhases)
;
// MAXI IFFT
......@@ -66,6 +69,7 @@ EMSCRIPTEN_BINDINGS(my_module_maxiFFT) {
.property("firstOctaveFrequency", &maxiFFTOctaveAnalyzer::getFirstOctFreq, &maxiFFTOctaveAnalyzer::setFirstOctFreq)
.property("averageFrequencyIncrement", &maxiFFTOctaveAnalyzer::getAvgFreqIncr, &maxiFFTOctaveAnalyzer::setAvgFreqIncr)
.function("getAverage", &maxiFFTOctaveAnalyzer::getAverage)
.function("getPeak", &maxiFFTOctaveAnalyzer::getPeak)
.function("getPeakHoldTime", &maxiFFTOctaveAnalyzer::getPeakHoldTime)
......
......@@ -72,7 +72,7 @@ public:
createDCTCoeffs();
}
// void mfcc(float* powerSpectrum, T *mfccs) {
void mfcc(vector<float> powerSpectrum, vector<T> mfccs) {
void mfcc(vector<float>& powerSpectrum, vector<T>& mfccs) {
melFilterAndLogSquare(powerSpectrum.data());
dct(mfccs.data());
}
......
......@@ -20,7 +20,7 @@ EMSCRIPTEN_BINDINGS(my_module_maxiMFCC) {
.smart_ptr_constructor("shared_ptr<maxiMFCC>",&std::make_shared<maxiMFCC>)
.function("setup", &maxiMFCC::setup)
.function("mfcc", &maxiMFCC::mfcc)
.function("mfcc", &maxiMFCC::mfcc, allow_raw_pointers())
;
};
#endif
......@@ -33,6 +33,15 @@ public:
static void clearVectorDbl(vector<double>& vecIn) {
vecIn.clear();
}
static void clearVectorFloat(vector<float>& vecIn) {
vecIn.clear();
}
// static void pr(){
// EM_ASM_({
// Module.print('I received: ' + $0);
// }, 100);
// }
};
using namespace emscripten;
......@@ -41,11 +50,14 @@ EMSCRIPTEN_BINDINGS(my_module) {
register_vector<int>("VectorInt");
register_vector<double>("VectorDouble");
register_vector<char>("VectorChar");
// register_vector<float>("VectorFloat");
register_vector<float>("VectorFloat");
class_<vectorTools>("vectorTools")
.constructor<>()
.class_function("clearVectorDbl", &vectorTools::clearVectorDbl)
.class_function("clearVectorFloat", &vectorTools::clearVectorFloat)
// .class_function("print", &vectorTools::pr)
;
// class_<testVectorHolder>("testVectorHolder")
......@@ -75,6 +87,9 @@ EMSCRIPTEN_BINDINGS(my_module) {
class_<maxiSettings>("maxiSettings")
.constructor<>()
.class_function("setup", &maxiSettings::setup)
.property("sampleRate", &maxiSettings::getSampleRate, &maxiSettings::setSampleRate)
.property("channels", &maxiSettings::getNumChannels, &maxiSettings::setNumChannels)
.property("bufferSize", &maxiSettings::getBufferSize, &maxiSettings::setBufferSize)
;
......@@ -158,11 +173,14 @@ EMSCRIPTEN_BINDINGS(my_module) {
// .constructor<>()
// .constructor<double, double>()
.smart_ptr_constructor("shared_ptr<maxiLagExp<double>>",&std::make_shared<maxiLagExp<double>>, allow_raw_pointers()) // not sure how to override constructors with smart_ptr
// .smart_ptr_constructor("shared_ptr<maxiLagExp<double>>",&std::make_shared<maxiLagExp<double>>)
// .smart_ptr_constructor("shared_ptr<maxiLagExp<double>>",&std::make_shared<maxiLagExp<double>>)
.function("init", &maxiLagExp<double>::init)
.function("addSample", &maxiLagExp<double>::addSample)
.function("value", &maxiLagExp<double>::value)
.property("alpha", &maxiLagExp<double>::getAlpha, &maxiLagExp<double>::setAlpha)
.property("alphaReciprocal", &maxiLagExp<double>::getAlphaReciprocal, &maxiLagExp<double>::setAlphaReciprocal)