将项目导入 React 后不再播放声音答案

【问题标题】：Sounds no longer playing after importing project to React将项目导入 React 后不再播放声音
【发布时间】：2020-09-02 17:20:41
【问题描述】：

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> 元素。

【问题讨论】：

可能与尝试在 React 组件中使用图像时出现类似问题。尝试导入声音资产并在组件中引用导入的对象，或者将它们嵌入require。如果您可以更新您的问题以包含 Minimal, Complete, and Reproducible（可能还有一个 running 代码和框以进行调试），那么帮助解决此问题的机会可能会更高。
感谢您的反馈。实际上，声音和它们所附加的元素与 react 组件是完全分开的。到目前为止，只有一个 React 组件。我将尝试更新问题，但我还不知道如何在单独的文件中使用 react 和 vanilla javascript 创建沙箱。
如果你熟悉 vscode 那么codesandbox 是一个几乎相同的克隆，使用 react 和 vanilla-js 模板开始。如果您熟悉任何其他最近的 IDE，它应该仍然是不言自明的。
感谢您的指导。我能够轻松地使用代码沙盒。不幸的是，就 react 而言，代码 sn-p 工具已经过时，并且不允许您上传外部媒体。正在更新与链接的代码和框。
@PsiKai 我相信您无法从公共文件访问 src 上的文件，这就是造成麻烦的原因。如果将 sound 移动到public，然后修改路径，则可以正常工作。 codesandbox for a quick test。顺便说一句repl.it 光年更好恕我直言

标签： javascript reactjs audio

【解决方案1】：

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

src 文件夹中的所有内容都打包在一个名为“static”的文件夹中。
其中的每个文件都正确链接到 index.html 文件。（我的意思是，按照我们对未编译项目的期望进行链接）。
建议在src上加载资产。

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

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

话虽如此/可悲的是，原始项目中的逻辑可能不是编译的。为了更好，也许look at these rules。

基本上，planner 和 .wav 最好放在源文件夹中。您也可以将 .wav 文件移动到公用文件夹中（不是最佳选择）。

我用第二种方法fixed your codesandbox。部分原因是，从帖子中推断出你是否真的需要公开的planner.js 并不容易。

无论如何，希望这会有所帮助。

【讨论】：

我不知道您是否还没有保存更新/修复，但 OP 的问题仍然在您的沙箱中重现。
@DrewReese 哦，谢谢。不，我在帖子（和评论）之后一直在玩代码。完成

【解决方案2】：

您可以将音频文件放在公共文件夹中，因为使用它的脚本在公共文件夹中。

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

或者，您可以将planner.js 放在src 中，这样您就可以访问驻留在src 中的wav 文件

【讨论】：