1. Source principale

Jason Sigal: Music Visualization with p5.js :
- Présentation : http://slides.com/jasonsigal/deck#/
- Code : http://slides.com/jasonsigal/h#/

2. Tutoriels vidéos

3. Historique de l'Audio Internet

<bgsound>
Flash
HTML5 <audio>
Mozilla Audio Data API
Web Audio API

4. Des exemples historiques

Oskar Fischinger : An Optical Poem (1938) par
John Whitney : Matrix III (1972)
John Whitney : "Catalog" (1961)
Visualisation par Rainer Wehinger (1970) de Gyorgy Ligeti : Artikulation (1958)
- Black MIDI :
- TSMB2 The Destroyer (6.26 million de notes)
- Notation classique
Messa di Voce (2003) (Italian, "placing of voice") :
- https://vimeo.com/25037421 (Space Chicken)
- https://vimeo.com/25037363 (Pitchpaint)
- Site Web officiel : http://www.tmema.org/messa/messa.html
Martin Wattenberg : The Shape of Song (2001)
Oscilloscope music :
- Ben F. Laposky : premières images abstraites réalisées avec un oscilloscope (1950)
- http://oscilloscopemusic.com/
Audio Facelyzer

5. Ce qui peut être visualisé avec p5.js

Amplitude : 1x valeur entre 0 et 1
- Linéaire :(
- Logarithmique :)
- https://p5js.org/examples/sound-measuring-amplitude.html
Détection de pics (Peak Detection)
- Seuil de déclenchement (Threshold high)
- Seuil de repos (Threshold low)
- https://p5js.org/examples/sound-mic-threshold.html
Fréquence (FFT)
- Analyse directe : 1024x valeurs entre 0 et 255
- Analyse en bandes logarithmiques : 33x valeurs entre 0 et 255
- https://www.youtube.com/watch?v=vOkrpjgn890
- https://www.youtube.com/watch?v=_ErU_gImmZc

6. Exemples avec p5.js

6.1 Fonctions d'analyse d'un fichier

Variables globales :

var fichier;

var amplitude;

var fft;

À ajouter dans preload() { } :

fichier = loadSound("Dead_Combo_-_01_-_Povo_Que_Cas_Descalo.mp3");

À ajouter dans setup() { } :

amplitude = new p5.Amplitude();
amplitude.smooth(0.5); // Assouplissement de l'analyse
amplitude.setInput(fichier); // Analyser le fichier

var fftSmoothing = 0.6;
var fftBins = 1024;
fft = new p5.FFT(fftSmoothing , fftBins );
fft.setInput(fichier);

fichier.loop();

À ajouter dans draw(){ } :

var level = amplitude.getLevel();

var spectrum = fft.analyze();
var bands = fft.logAverages(fft.getOctaveBands());

6.2 Détection de pics

À ajouter dans les variables globales:

var seuilOn = 500;
var seuilOff = 300;
var seuilActif = false;

À ajouter dans draw(){ } :

// DETECTER L'ACTIVITE DU SEUIL ET LES PICS
if ( donnee >  seuilOn && seuilActif == false ) {
        // UN PIC EST DETECTE
        seuilActif = true;
        // ... ajouter votre propre code ici qui est declenche
        // par la detection d'un pic

} else if ( donnee < seuilOff ) {
        seuilActif = false;
}

6.3 Sauter dans un fichier avec les touches du clavier

À ajouter dans keyTyped(){ } :

if ( key == '1' ) {
        fichier.jump ( 0 );
} else if ( key == '2' ) {
        fichier.jump ( fichier.duration() * .1 );
} else if ( key == '3' ) {
        fichier.jump ( fichier.duration() * .2 );
} else if ( key == '4' ) {
        fichier.jump ( fichier.duration() * .3 );
} else if ( key == '5' ) {
        fichier.jump ( fichier.duration() * .4 );
} else if ( key == '6' ) {
        fichier.jump ( fichier.duration() * .5 );
} else if ( key == '7' ) {
        fichier.jump ( fichier.duration() * .6 );
} else if ( key == '8' ) {
        fichier.jump ( fichier.duration() * .7 );
} else if ( key == '9' ) {
        fichier.jump ( fichier.duration() * .8 );
} else if ( key == '0' ) {
        fichier.jump ( fichier.duration() * .9 );
}

6.4 Fonction logMap()

function logMap(val, inMin, inMax, outMin, outMax) {
        var offset = 0;
        if (inMax === 0 || inMin === 0) {
                offset = 1;
                inMin += offset;
                inMax += offset;
        }
        var a = (outMin - outMax) / Math.log10(inMin / inMax);
        var b = outMin - a * Math.log10(inMin);
        return a * Math.log10(val + offset) + b;
}