React无法播放SRC URL含#的WAV音频，不修改文件名怎么解决？

你的判断正确，该报错确实是路径中的#符号导致的。URL规范中#是片段标识符，用于标记页面内锚点位置，浏览器解析资源路径时会自动截断#之后的内容，不会将其作为路径的一部分发送到服务端。因此你填写的./audio/C#5.wav实际会被解析为请求./audio/C，自然无法匹配到对应音频文件，触发资源加载失败报错。

只需要将路径中的#替换为对应的URL编码值%23即可，浏览器会自动将编码后的内容识别为路径的一部分，正确请求对应文件。修改后的完整代码如下：

import React from "react";
function Test() {
  // 可选优化：直接复用已预加载的audio元素，无需重复创建Audio实例
  const play = (note) => {
    document.getElementById(note).play();
  };
  return (
    <>
      <div>TEST</div>
      <button onClick={() => play("C5")}>Play C5</button>
      <button onClick={() => play("C#5")}>Play C5 sharps</button>
      <audio id="C5" src="./audio/C5.wav" />
      {/* 仅修改此处的#为URL编码%23即可 */}
      <audio id="C#5" src="./audio/C%235.wav" />
    </>
  );
}

export default Test;

补充说明：DOM元素的id属性支持包含#字符，因此id无需修改，原点击逻辑可以完全保留。

内容的提问来源于stack exchange，提问作者Dusttt