whileLoading function does not work as expected

[mathiasdg]

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [x] Other (specify if possible) Sound

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: Firefox Developer 92.0b9 and also in Brave 1.28.106 (Chromium: 92.0.4515.159) (Official build) (64-bits)
• Operating System: win10
• Steps to reproduce this: when preloading a song with the loadSound() callback function, I am making use of the build-in optional parameter "whileLoading". I'm logging the miliseconds when the function is done. It says it is loaded to 0.99 after around 200ms, but it takes around 3600-4000ms for the successCallback function to start. So I guess the loading percentage that is returned by this whileLoading callback function is wrong?

Here is a snippet from my code to reproduce this error:

let song;
let volume;
let size;
let loading = true;
let tijd = Date.now();
let perc = 0;

function setup() {
  createCanvas(440, 440);
  volume = new p5.Amplitude();

  rectMode(CORNER);
  noFill();
  strokeWeight(1);
  stroke(111, 144, 69);

  song = loadSound("stability.mp3", sound_loaded, sound_error, sound_loading);

  print("start setup()", Date.now() - tijd, "millisec");
}

function sound_loaded() {
  print("fully loaded: ", Date.now() - tijd, "millisec");
  loading = false;
  song.play();
}
function sound_error(err) {
  print(err);
}
function sound_loading(percentage) {
  print(
    "loading...",
    floor(percentage * 100) + "% - ",
    Date.now() - tijd,
    "millisec"
  );
  perc = percentage;
}

function draw() {
  if (loading) {
    background("green");

    // draw inner fill for loading bar based on the loaded percentage from the p5 function
    noStroke();
    fill(255, 100);
    rect(69, height / 2 + 22, map(perc, 0, 0.99, 0, 311), 11);

    // draw outer rect for loading bar
    strokeWeight(2);
    stroke(0);
    noFill();
    rect(69, height / 2 + 22, 311, 11);

    stroke(220);
    text("Loading...", width / 2 - 27, height / 2 + 4);
    strokeWeight(1);
    stroke(220, 144, 69);
  } else {
    size = map(volume.getLevel(), 0, 0.3, 0, 1100);
    background(0, 0, 0, 66);
    strokeWeight(0.5);
    rect(width / 2, height, 5, -size);
  }
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[yxiao1996]

Try to provide some context here:

The percentage number you see in the whileloading callback is computed using a progress event listener attached to the XMLHttpRequest to retrieve the audio file from the source you provided. See code link

The percentage is simply a ratio between loaded and total of the progress event. See code link and Progress event definition.

My guess: probably this is caused by the XMLHttpRequest not being closed properly after the audio file finished loading.