在Web编辑器中，p5.js在preload()函数中卡住加载

Question

我正在使用p5.js，我和我的朋友们为了好玩正在制作一个游戏，并且我们使用的是网络编辑器。我们已经使用preload函数导入了一些资源。这会显示一个加载屏幕。但是，它似乎永远不会停止加载。不幸的是，因为代码量太大，我无法直接把所有代码放在这里，但我可以提供一段代码片段和一个链接。

这是我们的p5草图的链接：https://editor.p5js.org/adsfzxc940/sketches/jkCZbn4oM

我们认为问题根源在于我们的preload函数，它是这样的：

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

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

  // 声音变量快捷方式
  music.push(sounds[0], sounds[1], sounds[3]);
  menuSong = music[2];
  error = sounds[2];
  lies = loadSound("lies.mp3"); // 注意这里再次加载了"lies.mp3"

  // 图像变量快捷方式
  // baseImages.defensive = images[1]; // 注意：索引可能错误，应为0
  // baseImages.offensive = images[2]; // 同上，应为1
}

所有文件都是已定义的，你可以通过链接或这张图片看到：https://i.stack.imgur.com/jZYtB.png

我们甚至尝试检查过资源的位置，但似乎没有任何办法能阻止它卡在加载环节。奇怪的是，p5.js也没有告诉我们有任何错误。我们几乎可以肯定问题是出在preload函数上，因为一旦删除它，游戏就能正常运行。

任何帮助都将非常感激，因为这个问题已经困扰我好几个小时了，我们不想从头再来。请注意，我和与我一起工作的朋友都是JavaScript新手。

Wooble · Answer

我理解你所面临的困扰。在审查了你的代码并检查了资源位置后，看起来一切井然有序。由于p5.js没有抛出任何错误，并且在不使用预加载功能时游戏运行正常，那么可能是加载过程中出现了问题。

一个需要考虑的因素是loadSound函数是异步的，它可能导致加载屏幕无限期地挂起。你可以尝试使用p5.js中的preload()函数来加载资源，因为它确保在调用setup()和draw()之前所有资源都已加载完毕。

这里是如何在p5.js的preload()中结构化使用loadImage()和loadSound()的示例代码：

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

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

然后，你可以在setup和draw函数中使用这些已加载的资源。试一下这个方法，看看是否有所帮助，或者如果你遇到任何其他问题，请告诉我。祝你编程愉快！

glglgl · Answer

我认为你的blades.mp3文件并没有出现在你的草图文件中。我查看了你的草图文件列表，如下图所示，并没有找到这个音频文件：

草图文件列表，未显示blade.mp3

另外，从网络标签页抓取的信息来看，这个mp3文件没有成功加载（p5文件托管似乎为文件生成了一个UUID，但200响应一直没有到达，这使得调试变得更困难。你可以逐个替换loadSound()中的音频文件，使用已知可以正常加载的音频，来定位问题所在）：

音频文件在网络标签页中未加载

当我将那个问题文件替换为一个已知可以正常工作的音频文件，比如这样进行测试：

  sounds = [
    loadSound("lies.mp3"), // 将blades.mp3替换为测试用的lies.mp3
    loadSound("shiver.mp3"),
    loadSound("error.mp3"),
    loadSound("lies.mp3"),
  ];

这样操作后，音频就可以正常加载并播放了。

另一种隔离问题的方法是直接在HTML中使用音频标签尝试加载该文件：

如果这样做也不行，那说明问题不在于p5，而是音频文件本身有问题或URL不可访问。

遗憾的是，p5在加载音频时永远不会超时并给出合理的错误信息，这应该是它需要改进的地方。你完全可以为此提交一个改进的请求或是报告一个问题。以下是一个适合用于报告此问题的最小示例代码：


  See the Pen <a href='https://codepen.io/pen/MoRwzg'>P5.js Audio Load Timeout Example</a> by Anonymous User (<a href='https://codepen.io/'>@Anonymous</a>) on <a href='https://codepen.io'>CodePen</a>.

请注意，上面的代码示例链接是一个示意性展示，实际内容应根据具体情况调整。