Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – p5.js stuck on loading in the preload() function on web editor

I am using p5.js, and me and my friends are working on a game for fun. We are using the web editor. We have imported some assets using the preload function. This displays a loading screen. However, it never stops loading. Unfortunately, I can’t really put the code here, because of how much of it there is, but I can provide you guys with a snippet and a link.

Here is the link to our p5 sketch: https://editor.p5js.org/adsfzxc940/sketches/jkCZbn4oM

This is our preload function, what we think is the root of the problem:

function preload() {
  images = [
    loadImage("defensive.png"),
    loadImage("offensive.png"),
  ];

  sounds = [
    loadSound("blades.mp3"),
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];

  // Sound variable shortcuts
  music.push(sounds[0], sounds[1], sounds[3]);
  menuSong = music[2];
  error = sounds[2];
  lies = loadSound("lies.mp3");

  // Image variable shortcuts
  // baseImages.defensive = images[1];
  // baseImages.offensive = images[2];
}

All files are defined, as you can see either through the link or this image: https://phpout.com/wp-content/uploads/2024/01/jZYtB.png

We have even tried checking the asset locations, but nothing seems to stop it from getting stuck on loading. The weird thing is that p5 doesn’t even tell us there are any errors. And we are almost certain that the preload function is the reason for this, because upon deleting it, the game runs fine.

Any help would be incredibly appreciated, as this has annoyed me for hours now and we don’t want to have to start over again. Note that me and the people who helped work on this with me are very new to JavaScript.

Tags:

2

Answers


  1. 0

    I understand the frustration you’re facing. After reviewing your code and checking the asset locations, it seems like everything is in order. Since p5.js isn’t throwing any errors and the game runs fine without the preload function, there might be an issue with the loading process.

    One thing to consider is that the loadSound function is asynchronous, and it might be causing the loading screen to hang indefinitely. You could try using the p5.js preload() function for loading assets, as it ensures that all assets are loaded before setup() and draw() are called.

    Here’s an example of how you can structure your preload function using loadImage() and loadSound() in the p5.js preload():

    function preload() {
  images = [
    loadImage("defensive.png"),
    loadImage("offensive.png"),
  ];

  sounds = [
    loadSound("blades.mp3"),
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];
}

    Then, you can use these loaded assets in your setup and draw functions. Give it a try, and let me know if it helps or if you encounter any other issues. Happy coding!

    Login or Signup to reply.
  2. 0

    I don’t think your blades.mp3 file is present in the sketch files. Here’s a list of the files I see in your sketch:

    list of sketch files, without blade.mp3 present

    Here’s a capture of the mp3 not loading in the network tab (p5 file hosting generates a uuid for the file, apparently, and the 200 response never arrives–this makes it harder to debug, but you can plop in known-good audio files into each loadSound() call one by one until you find the problem):

    audio file not loading in network tab

    If I replace that one file with with known-good audio, like:

      sounds = [
    loadSound("lies.mp3"), // blades.mp3 replaced for testing
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];

    it works for me.

    Another way to isolate the problem is load the audio file in a plain HTML audio tag:

    <audio src="blades.mp3" controls></audio>

    If that doesn’t work, then you know it’s not a p5 problem, just a bad audio file or an inaccessible URL.

    It’s unfortunate that p5 never times out with a reasonable error message. It should. That’d be a good PR or issue to open. Here’s a minimal example of the problem suitable for an issue:

    let audio;
let button;

function preload() {
  // if you uncomment this, p5 will load forever and the play button will never appear:
  // audio = loadSound("https://www.example.com/bad-url.mp3");

  // this will work (at least at the time of posting the ogg is still valid)
  audio = loadSound("https://upload.wikimedia.org/wikipedia/commons/7/7f/Bluetooth.ogg");
}

function setup() {
  noCanvas();
  noLoop();
  button = createButton("play");
  button.mouseClicked(() => audio.play());
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search