P5.js en geluid

Je kunt in P5.js naast veel visuele dingen ook met geluid werken, wel zo interessant voor Muziektechnologen.

makeNote

Om snel gebruik te kunnen maken van geluid hebben we een extra functie toegevoegd aan P5.js Om deze functionaliteit te verkrijgen zal je csdosc moeten updaten. Zie hieronder hoe je dat doet:

csdosc updaten

Let op: je moet verbonden zijn met internet om te kunnen updaten

makeNote gebruiken

makeNote is een functie die een noot afspeelt in een gegeven frequentie, amplitude en duur.
je kunt drie argumenten invullen:

voorbeeld: makeNote(60,0.5,0.1) //een c op half volume met een duur van 100 miliseconden.

let op: omdat browsers ervoor zorgen dat geluiden niet zomaar automatisch afgespeeld kunnen worden zal je eerst in het canvas moeten klikken voordat er geluid afspeelt.

uitgebreider voorbeeld:

function setup() {
    createCanvas(800,600);
    backgrount(255);
}

function draw() {

}

function mousePressed() {
    makeNote(random(48,72),random(0.1,0.6),random(0.01,0.5));
    // speelt een willekeurige noot af elke keer als je klikt
    // willekeurige toonhoogte tussen midinoot 48 en 72
    // willekeurige amplitude tussen 0.1 en 0.6
    // willekeurige duur tussen 10 en 500 miliseconden
}

Samples

In P5js kan je verschillende audiobestanden afspelen. Zie hieronder een kort voorbeeldje van hoe je een sample afspeelt zodra je met de muis klikt. 

let sound;
function preload() {
    soundFormats('wav','mp3');
    sound = loadSound('samples/test.wav');
}

function setup() {
    createCanvas(800,600);
    background(255);
}

function draw() {
    //hier gebeurt in prinicpe niets.
}

function mousePressed() {
    sound.play();   
}

De preload-functie is een functie die wordt uitgevoerd voordat de setup-functie wordt uitgevoerd. In die functie kan je de sample inladen om later te kunnen gebruiken. Om dit te doen moet je eerst aangeven met soundFormats welke bestandstypen je kunt gebruiken. Je kan in P5js gebruikmaken van .wav, .mp3 en .ogg. .aif werkt dus niet. Daarna laad je met loadSound het bestand in dat je wil gebruiken. Zorg dat dit in dezelfde map staat als je sketch, eventueel in een samples-folder. De sample is nu beschikbaar om door P5js gebruikt te worden.

In de keyPressed()-functie kan je nu zorgen dat de sample wordt afgespeeld als je op de muis klikt. Als je dit doet in de draw()-functie zal de sample met de snelheid van de frameRate worden afsgespeeld. Dus dat zou neerkomen op ongeveer 60 keer per seconde.

De simpelste manier om de sample af te spelen is samplenaam.play() waarbij samplenaam de plek is waar je in preload() de sample hebt ingeladen.

Voor verdere opties die je hebt bij het afspelen van een sample kan je de reference op de site van P5js bekijken.

samples in een lijst inladen

Net zoals je getallen of woorden in een array kunt zetten, kan je ook samples in een array zetten. Dit om makkelijk meerdere samples beschikbaar te hebben in een sketch. Zie hieronder het voorbeeld hoe je dit aanpakt. 

let sounds = [];
let soundFiles = ['kick','snare','hihat','cowbell','shaker']

function preload() {
    soundFormats('wav');
    for (let i=0; i < soundFiles; i++) {
        sounds[i] = loadSound('samples/'+soundFiles[i]+'.wav');
    }
}

function setup() {
    createCanvas(800,600);
    background(255);
}

function draw() {
    //hier gebeurt niets
}

function keyPressed() {
    let gekozenSample = floor(random(soundFiles.length))
    sounds[gekozenSample].play();
}

Dit voorbeeld gaat uit van verschillende samples die allemaal in de zelfde map staan en een .wav-bestand zijn. De gemene deler van deze samples is dat ze staan in samples/filename.wav alleen de filename is anders. Dus alleen die informatie hoeft in een array geplaatst te worden. Vervolgens kan je met + verschillende onderdelen van een string samenvoegen om zo voor elke samplenaam in de soundfiles-lijst een compleet path naar de sample te generen. Vervolgens worden elk van deze samples in de sounds-array gezet. zodat we daar later gebruik van kunnen maken.

Verder gebruik van p5js in combinatie met geluid wordt later toegevoegd.