filenames in loadSound seems double-encoded + can't get to setup()

[msawired]

I added new p5.sound library to OpenProcessing, however it broke all the sketches that is supposed to work with it. Did some investigation and seems to fail on loadSound directly.

Here is an example:
https://openprocessing.org/sketch/2901469#

Since then, I reverted the version in the library list to the legacy one, but you can test the new library above.
You can see that the file with space in it doesn't work as expected (browsers already encode the URL on fetch requests, and p5.seems to encode it again.

With a normalized filename, preload doesn't seem to complete and setup() is never run.

[ogbabydiesal]

I forked your sketch and used a library that I built form the source. it works. it seems the latest release is from almost a year ago!
https://openprocessing.org/sketch/2901953

@ksen0 could you make a new release of the main branch?

I'll close this when a new release is made and we verify that it's working.

[ogbabydiesal]

I also notice your "TechnoPulse.mp3" is 0mb and wouldn't load for me so I made a copy from "Techno Pulse.mp3" and renamed it. when you're testing the new library that might create some problems.

[msawired]

@ogbabydiesal yes I can confirm that your compiled version works. Not sure why you saw the file at 0mb, I can see its size, and managed to work both files with your compiled version. @ksen0 can you push a release for this so I can add it to the OP library list (or let us know who we can contact to release this)? People using p5 v2 are asking for it on OP, as the older library doesn't work with v2.

[msawired]

Also, on the release, if you can generate a compiled file on the /dist folder, that would also make things more guaranteed (instead of relying jsdelivr rollup).

[ksen0]

On it, sorry for the delay

[ksen0]

@msawired @ogbabydiesal 0.3.0 is released on npm and I've added the compiled files to the release on github. Please let me know if I missed anything? Thanks so much

[ogbabydiesal]

thanks @ksen0 , what's your feeling of keeping a sort of "nightly" build in the dist folder as suggested by @msawired ?

[ksen0]

@msawired could you let me know please if I understood the /dist request well? I understood it as adding the compiled files to the release on GitHub, in addition to jsdelivr cdn link. If you meant something else please let me know?

[msawired]

ok, I may be off with the request on /dist folder. Some libraries used to come with a pre-built versions in dist folder but I guess generation of these assets are now automated via npm, that npm installs include these automatically. It works from npm and jsdelivr at the moment, thank you.
But back to the original issue: I still see the double-encoding of filenames issue. I double-checked the file on my sketch, seems to work fine.
I see this path rewrite on p5.sound.js:6800. I think this is the cause. Is this coming from tone.js?

/* Loads a url using fetch and returns the AudioBuffer. */    
static load(url) {
      return __awaiter(this, void 0, void 0, (function*() {
        // test if the url contains multiple extensions
        const matches = url.match(/\[([^\]\[]+\|.+)\]$/);
        if (matches) {
          const extensions = matches[1].split("|");
          let extension = extensions[0];
          for (const ext of extensions) if (ToneAudioBuffer.supportsType(ext)) {
            extension = ext;
            break;
          }
          url = url.replace(matches[0], extension);
        }
        // make sure there is a slash between the baseUrl and the url
                const baseUrl = "" === ToneAudioBuffer.baseUrl || ToneAudioBuffer.baseUrl.endsWith("/") ? ToneAudioBuffer.baseUrl : ToneAudioBuffer.baseUrl + "/";
        // encode special characters in file path
                const location = document.createElement("a");
        location.href = baseUrl + url, location.pathname = (location.pathname + location.hash).split("/").map(encodeURIComponent).join("/");
        const response = yield fetch(location.href);
        if (!response.ok) throw new Error(`could not load url: ${url}`);

[msawired]

Updated sketch is here: https://openprocessing.org/sketch/2901469
Also, few other notes:

• although the code above throws an error on fetch errors, this is not thrown on the frontend. No errors on misspelled filenames.
  Also I am confused about how userStartAudio should be used. I will create a separate issue on this.

[ksen0]

Hi @msawired ! @ogbabydiesal and I are looking at this right now, a couple of notes, thanks for your patient.

• The sketch linked is using the original p5.sound which is a different repo (https://github.com/processing/p5.js-sound), we're up to 1.11.12 on v1 now,
• Here's one of @ogbabydiesal 's examples (delay)[https://editor.p5js.org/thomasjohnmartinez/sketches/Wlcnc6WCD], it uses a pattern of cnv.mousePressed(playSound); and sound.play() instead of userStartAudio()
• userStartAudio() should only be called from user interaction (mouse click), due to browser policy, but I agree, this is confusing. Every sound source (oscillators etc) has a start() and that needs to happen on click. Rather than individually stopping and starting, userStart/StopAudio can be used to start/stop everything at once.

While we talked, @ogbabydiesal also explained what userStartAudio() does and here's the illustration we came up with, maybe this can also be helpful to you:

let sound, amp, cnv;
  
function preload() {
  //replace this sound with something we can distribute
  sound = loadSound('https://tonejs.github.io/audio/berklee/gong_1.mp3');
}
 
let state = 0;
function setup() {
  cnv = createCanvas(400, 400);
  cnv.mousePressed(playSound);
  textAlign(CENTER);
  fill(255);
  amp = new p5.Amplitude();
  sound.connect(amp);
  describe('The color of the background changes based on the amplitude of the sound.');
}
 
function playSound() {
  if(state===0){
    sound.play(); // this will generate sound and also start audio context
  } else if (state === 1) {
    userStopAudio(); // this will stop audio context, but sound is still "generated" but not audible - this "mutes" rather than "stops"
  } else if(state === 2) {
    userStartAudio(); // this will resume the audio context
  }
  
  state += 1;
}
 
function draw() {
  let level = amp.getLevel();
  level = map(level, 0, 0.2, 0, 255);
  background(level, 0, 0);
  text('click to play', width/2, height/2);
}