Reactjs 无法播放 SRC URL 中带有"#"的音频文件

Question

我正在构建一个正常的应用程序，有2个按钮，每个将播放1WAV音频文件时点击。

代码如下:

import React from "react";
function Test() {
const play = (note) => {
new Audio(document.getElementById(note).src).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" />
<audio id="C#5" src="./audio/C#5.wav" />
</>
);
}
export default Test;

C5文件正常播放。但是React似乎不能播放C#5文件，我得到这个错误:

index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
at L (index.js:1)
at Y (index.js:1)
at index.js:1
at index.js:1
at l (index.js:1)
L @ index.js:1
Y @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
l @ index.js:1
localhost/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

是因为文件路径中的#吗?如何在不更改文件名的情况下解决这个问题?

如果有帮助，所有的音频文件都放在公共文件夹中。请帮帮我。非常感谢。

Answer 1

尝试将#替换为%23，因为它是#的HTML转义序列。

通常在URL中，散列标记(#)将浏览器指向页面或网站的特定位置。它用于将对象的URI与片段标识符分开。所以你需要用%23转义。

你可以这样做:

<audio id="C5" src={"./audio/C#5.wav".replace('#', '%23')} />

或者如果你只想调用这一个文件:

<audio id="C5" src="./audio/C%235.wav" />

Answer 2

散列符号('#')表示URL中片段标识符的开始。当发出HTTP请求时，hash标记和它后面的字符都不会发送给服务器。

您可以尝试将url中用作锐利的散列符号编码为

src="./audio/C%23.wav"

也可以将文件重命名为不使用特殊字符，例如csharp.wav