Playing sound with Processing.js on browser

Question

I'm trying to get my processing.js application working on web browsers. When I'm running it on Processing 3.5.4 (on Windows) everything's fine, but on HTML it draws everything but the sounds don't play. (fonts don't load either, I can't see any text). Do I need another javascript audio and font library?

That's how I import the sound library:

 import processing.sound.*;
    SoundFile file;

And that's how I get it played (It does play on the desktop app, doesn't play on browsers)

file = new SoundFile(this, "song.wav");
file.play();

What approach would be the easiest to solve this?

Answer 1

Try p5.js and p5.sound library and see the loadSound() example:

let mySound;
function preload() {
  soundFormats('mp3', 'ogg');
  mySound = loadSound('assets/doorbell');
}

function setup() {
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(canvasPressed);
  background(220);
  text('tap here to play', 10, 20);
}

function canvasPressed() {
  // playing a sound file on a user gesture
  // is equivalent to `userStartAudio()`
  mySound.play();
}

Processing.js is no longer updated AFAIK.