Sound Visualizer

Frohes Neues!
Zum Start ins neue Jahr präsentiere ich einen kleinen Sound Visualizer.
Natürlich, wie sollte es im Moment auch anders sein, mit Partikeln in einer dreidimensionalen Umgebung. Ihr könnt also mit der Maus die Szenerie drehen und per Mausklick zwischen vielen verschiedenen Konfigurationen wechseln. Es stehen 32 verschiedene Farbkombinationen zur Verfügung und dazu noch 4 unterschiedliche Anordnungen der Partikel.

Wie üblich könnt ihr über „Open Controls“ verschiedene Einstellungen vornehmen. Auf ein paar möchte ich hier kurz eingehen.
Mit „Particles Amount“ bestimmt ihr die Anzahl an Partikeln die zum visualisieren eingesetzt werden sollen. Wenn ihr einen schnellen Rechner habt, dann können das bis zu 100000 sein!  Mit „Particle Distance“ bestimmt ihr den Abstand der Partikel zueinander.
Mit „Frequency Scale“ legt ihr fest, wie stark die Particles auf die Frequenz reagieren und per „Buffer Length %“ bestimmt ihr wie viel Prozent vom Buffer für die Visualisierung benutzt werden soll.
Mit „Speed“ und „Smoothing Time“ nehmt ihr Einfluss wie empfindlich die Particles reagieren und mit welcher Geschwindigkeit.
Per „Color“ lässt sich ein Farbkanal von 0 – 255 frei verändern und somit könnt ihr auch auf die Farbgestaltung selber Einfluss nehmen.
Mit „Base“ legt ihr fest ob zusätzlich zu jedem Particle auch immer noch ein extra Particle angezeigt werden soll. Dieses extra Particle visualisiert die Basis, bzw. zeigt euch an wo auf der Y-Achse der Nullpunkt eines jeden Particles ist.
Die anderen Einstellungen sollten schon aus den anderen Experimenten bekannt sein oder selbsterklärend. Am besten einfach rumspielen und austoben.

Die Technik die dahinter steckt und auf die ich später noch ganz kurz eingehe wird leider noch nicht von allen Browsern unterstützt. Speziell auf mobilen Geräten ist die Soundwiedergabe im Browser und das Analysieren der Frequenz noch nicht möglich. Daher richtet sich dieses Experiment in erster Linie an Desktop User. Browser Plugins werden aber nicht benötigt, da alles in HTML5 umgesetzt ist.

Hier geht es direkt zum Experiment. Nur falls ihr die volle Performance herausholen wollt.
   
Falls ihr das Experiment nicht selbst ausprobieren könnt, weil z.B. euer Browser ungeeignet ist und ihr nicht auf den aktuellen Firefox oder Chrome ausweichen könnt, dann könnt ihr euch hier ein kleines Video dazu anschauen:



Zur Technik wie man an die Audiofrequenz kommt folgend ein paar Code-Schnipsel.
An dieser Stelle initialisiere ich den Sound, bzw. den Analyser. Hier findet ihr ein kleines Tutorial dazu.

audio = new Audio();
audio.src = 'DeinSong.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;

audioContext = new ( window.AudioContext || window.webkitAudioContext )();

analyser = audioContext.createAnalyser();

audioSrc = audioContext.createMediaElementSource( audio ); 
audioSrc.connect( analyser );

analyser.connect( audioContext.destination );
analyser.smoothingTimeConstant = smoothingTimeConstant;//0.50;
analyser.fftSize = particleAmount * 2;

analyserBufferLength = analyser.frequencyBinCount;

In der „requestAnimFrame“ Function dann macht ihr folgendes:

var frequencySource = new Uint8Array( analyser.frequencyBinCount );

analyser.getByteFrequencyData( frequencySource );

Und in der For Schleife dann für jedes Particle oder Objekt eurer Wahl dann:

var frequency = frequencySource[ audioBufferIndex ];
var y = frequency / frequencyFactor;

Wobei y dann den Wert beinhaltet der euer Objekt beeinflusst.

Und, natürlich ganz wichtig. Das Lied welches ihr hier zu hören bekommt ist von Polar DUBstep und hat den Titel: Piazzolla (spring) dubtep remix