Christoph Reuter: p5 und p5.sound

Zunächst werden im <head> der Seite die beiden Scripte für P5 und P5.sound eingebunden:

Dann wird im <body> der Seite ein Container mit einer eindeutigen id mithilfe von DIV-Tags angelegt, in dem alles angezeigt werden soll. Dies geschieht via

über Style-Eigenschaften kann man diesen noch weiter im Aussehen verändern, z.B.

Das dazugehörende Script ist wie fast alle P5 Scripte aufgebaut:
Erst werden über die Funktion preload() größere Dateien vorausgeladen:

function setup(){
var container = createCanvas(800,400); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
container.mouseClicked(togglePlay); // auf Klick auf Canvas reagieren
fft = new p5.FFT(); // Fouriertransformation des Signals ermöglichen
sound.amp(0.5); // Amplitude des vorausgeladenen Klangs "sound" auf die Hälfte reduzieren
}

Daraufhin wird in der Funktion draw() beschrieben, was im Canvas dargestellt werden soll:

function draw(){
background(255, 255, 255); //zeichne weißen Hintergrund
cursor(HAND); // zeige den Cursor als Hand

var waveform = fft.waveform(); // hole aus dem Klang alle Pegelwerte und schreibe sie
// ins Array waveform
for (var i = 0; i < waveform.length; i++){ // hole in einer Schleife in der Länge
// des Arrays waveform jeden einzelnen Wert i aus dem Array
var y = map( waveform[i], -1, 1, 0, height*2);// skaliere jeden Wert aus dem
// Array waveform, der zwischen -1 und 1 liegt, so, dass er zwischen 0 und der doppelten Höhe des
// Canvas dargestellt wird, und weise ihn dem Wert y zu (Durchmesser des Kreises)
}

var playbackRate = map(mouseY, 0.1, height, 2, 0); // skaliere die Y-Koordinate
// der Maus zwischen 0,1 und der Höhe des Canvas auf einen Wertebereich zwischen 2 und 0 und weise
// die Zahl der Variablen playbackRate zu.
playbackRate = constrain(playbackRate, 0.01, 4); //begrenze die Playbackrate mit
// Hilfe von constrain() auf einen Wertebereich zwischen 0.01 und 4).
var vorzurueck = map(mouseX, 0, width, -1, 1);// skaliere die X-Koordinate
// der Maus zwischen 0 und der Weite des Canvas auf einen Wertebereich zwischen -1 und +1 und weise
// die Zahl der Variablen vorzuureck zu.
if (vorzurueck<0){faktor=-1;} else {faktor=1;} // Wenn die Variable vorzuureck
// kleiner ist als 0, dann lasse die Variable faktor -1 sein (d.h. dss Sample wird rückwärts
// gespielt, da mit -1 malgenommen), sonst lasse die Variable faktor +1 sein (d.h. dss Sample wird
// vorwärts gespielt, da mit +1 malgenommen),
playbackRate = playbackRate * faktor; // multipliziere die playbackRate mit dem Faktor +1 oder -1, um bei positiver playbackRate das Sample vorwärts oder bei negativer playbackRate das Sample rückwärts abzuspielen.
sound.rate(playbackRate); // weise dem Klangbeispiel "sound" via .rate() die errechnete Playbackrate zu.
noStroke(); // keine Strichfarbe = keinen Rand für den Kreis
fill(188, 48, 47); // Dunkelrot als Füllfarbe
ellipse(mouseX, mouseY, y/10, y/10);// Zeichne einen Kreis an der Mausposition (x,y)
// und lasse seinen Durchmesser vom ermittelten Pegel (y) bestimmen.
text('Geschwindigkeit: ' + round(playbackRate * 100) + '%', 10, 20);
// Gebe die Geschwindigkeit (Samplerate) in Prozent aus
text('Vorwärts/Rückwärts: ' + round(vorzurueck * 100) + '%', 10, 40);
// Gebe die Abspielrichtung (vor/zurück) in Prozent aus
}

Schließlich wird mit der Funktion togglePlay() beschrieben, was passieren soll, wenn auf den Canvas geklickt wird

function togglePlay() {
if (sound.isPlaying()) { // wenn der Klang "sound" gespielt wird
sound.pause(); // stoppe ihn
} else { // in allen anderen Fällen
sound.play(); // spiele ihn ab.
}
}

function setup(){
var container = createCanvas(800,400);
container.parent('p5container');
container.mouseClicked(togglePlay);
fft = new p5.FFT();
sound.amp(0.5);
}

function togglePlay() {
if (sound.isPlaying()) {
sound.pause();
} else {
sound.play();
}
}
</script>