Om audio onder je sketch te monteren moet je wel muziek hebben. Dat heeft altijd ook met rechten te maken. De advocaten van die artiesten entertainers moeten ook een inkomen. Download grappige geluiden van https://freesound.org/ dat werkt het beste. Je kunt WAV of MP3 bestanden gebruiken voor je project die je via de editor moet uploaden.

Libraries

Check dat je de juiste p5 libraries meeneemt in je index.html. Standaard geeft Replit je een index zonder p5.sound 🙁

Preload je audio

In de preload laad je externe media in op een veilige manier. Je sketch gaat pas met setup() verder na de preload. Let op de map sounds die ik in dit project gebruik. Dat zie je terug in de naamgeving. Let op eenvoudige namen zonder spaties, hoofdletters, rare tekens. Zo voorkom je domme fouten.

let scarysound; // CC-BY-SA suonho
let laughsound; // CC-BY-SA klankbeeld
let pausebutton; // 

function preload() {
scarysound = loadSound("sounds/scaryscape-01.wav");
laughsound = loadSound("sounds/laugh.wav");
}

Beide sounds scarysound en laughsound krijgen een eigen variabele die ik met let introduceer. Ook de rechten van deze CC-BY-SA bestanden geef ik aan in de code als comment. Dat hoort dus zo bij dit soort CC-BY licenties. Ook jouw werk moet je weer onder CC-BY-SA publiceren – je mag de licentie niet ombouwen of weglaten.

Een stil knop

Je zag al dat ik een variabele pausebutton had gemaakt. Die stil-knop gaan we nu eerst maken.

function setup() {
  pausebutton = createButton("Audio Off !");
  pausebutton.position(315, 375);
  pausebutton.mousePressed(silence);
}

In de setup maak je de knop door de tekst aan te geven, de positie waar die moet komen en wat er gebeurt (welke functie er wordt getriggerd) als je op de knop drukt. In dit geval de functie silence().

function silence() {
  scarysound.amp(0);
  laughsound.amp(0);
  console.log("amp 0");
}

Dit is een beetje een lelijke truuk die gewoon werkt. We stoppen het playen niet eens. We zetten alleen de amplifier (versterker) op 0. Stilte is uw resultaat. Je zult een soortgelijke functie nodig hebben om hem weer harder te zetten, maar die gebruiken we nu niet dus dat slaan we over.

Het geluid aanzetten

Het belangrijkste doen we als laatste: het geluid ook echt aanzetten. Scarysound gaat gewoon aan, als ie niet aan het spelen is. Dan voorkom je dat ie telkens opnieuw start.

function draw() {
if (!scarysound.isPlaying()) {
scarysound.play();
}

De gemene lach zetten we aan als je ergens klikt, maar niet op de pausebutton. In de setup:

if (mouseIsPressed) {
  if (!laughsound.isPlaying() && !pausebutton.mouseIsPressed) {
  laughsound.play();
  }
}