时间戳

首页 > 解决方案 > 将项目导入 React 后不再播放声音

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

问题描述

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 的其余部分正在运行，并且我已确保声音的文件路径是正确的。

这是我的目录布局。

这段代码来自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>元素动态生成的 's 上。

标签： javascriptreactjsaudio

解决方案

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

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

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

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

话虽如此/可悲，原始项目中的逻辑可能不是编译的。为了更好，也许看看这些规则。

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

我已经用第二种方法修复了你的代码框。部分原因是，从帖子中推断出你是否真的需要planner.js在公共场合并不容易。

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

推荐阅读