javascript - 将项目导入 React 后不再播放声音

Question

https://codesandbox.io/s/optimistic-sammet-1yms2?file=/public/index.html
这是我最小的可重现示例。
当页面只是带有 javascript 的静态 html 时，声音正在工作。重构为 React 应用程序后，声音停止工作，我收到 2 个错误:Uncaught Error: The error you provided does not contain a stack trace.和 (index):1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.当我将 HTML 文件路径粘贴到浏览器中时，声音可以正常工作，但是当我在 localhost 上运行应用程序时，会出现错误并且没有声音。其余的 javascript 正在工作，我已确保声音的文件路径正确。
This is my directory layout.
此代码来自daily-planner/public/planner.js，并显示了音频播放功能:

var penNoises = ["../src/sounds/Pen1.wav", "../src/sounds/Pen2.wav"];
var randomPen = Math.floor(Math.random() * penNoises.length);

function penSound() {
  var audio = new Audio(
    penNoises[Math.floor(Math.random() * penNoises.length)]
  );
  audio.volume = 0.1;
  audio.play();
}

function penCross() {
  var audio = new Audio("../src/sounds/penCross1.wav");
  audio.play();
  }

调用这些函数的事件监听器附加到 <li>是从数组中动态生成的，而不是 <audio>元素。

Answer 1

这不起作用的原因是 React 编译文件的方式。

src 文件夹中的所有内容都打包在一个名为“static”的文件夹中。

并且其中的每个文件都正确链接到 index.html 文件。
(我的意思是，按照我们对未编译项目的期望进行链接)。

建议在 src 上加载 Assets 。

但公用文件夹上的链接保持不变，它们不遵循编译完成的目录重新排列。运行npm run build或 npm start退房。

所以你的 planner.js 上的路径包含一个 URL - 这是预期的 - 但没有指向任何地方。

话虽如此/可悲，原始项目中的逻辑可能不是编译的。为了更好也许look at these rules .
基本上，planner 和 .wav 最好放在源文件夹中。您还可以在公共(public)文件夹中移动 .wav 文件(不是最佳选择)。
我有 fixed your codesandbox用第二种方法。部分原因是，如果你真的需要 planner.js，从帖子中推断出来并不容易。公开与否。
无论如何，希望这会有所帮助。