javascript - Transient problem with p5.js preload() and sound file

Question

I made the following using p5.js:

https://nhsegal.github.io/Bowling-Ball-Activity/

Generally, the first time one visits the website, it doesn't load properly. One gets a "Loading" message that doesn't resolve. However, if one then opens the developer console and then reloads the page, it then works. One can then close the console. In subsequent visits, the site will still work.

The problem seems to have something to do with the sound file and preload(). It's as if the program moves from preload() to setup() without pausing enough to let preload() finish. How can I ensure that the program runs correctly upon first visit?

I've pasted below the top part of the sketch:

let trail;
let trash;
let trailbutton;
let resetbutton;
let showtrail = false;
let crashsound;
let played = false;
let trailupdate;
let counter = 0;
let ball;
let home;

function preload() {
  soundFormats('mp3');
  crashsound = loadSound('crash.mp3');
}

function setup() {
  createCanvas(800, 500);
  frameRate(30);
  trailbutton = createButton('show trail');
  trailbutton.mousePressed(toggleTrail);
  resetbutton = createButton('reset');
  resetbutton.mousePressed(reset);
  resetbutton.position(20, 60);
  trailbutton.position(90, 60);
  home = createVector(width / 2, height / 2);
  ball = new Ball(8, home.x, home.y);
  trail = new Array(0);
}

question from:https://stackoverflow.com/questions/65859840/transient-problem-with-p5-js-preload-and-sound-file

Answer 1

Waitting for answers