如何正确格式化 HTML5 音频元素的文件参考？答案

【问题标题】：How can I correctly format file reference for HTML5 Audio element?如何正确格式化 HTML5 音频元素的文件参考？
【发布时间】：2021-11-06 15:09:03
【问题描述】：

我在 Node.js 应用程序中使用 HTML5 <audio> 元素，并且在设置 src.track 时遇到了文件引用和特殊字符的问题。从我的 mySQLite3 数据库中引用文件位置时，我将发送一个格式为：

/Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3

我收到以下错误：

GET file:///Users/admin/Music/iTunes/iTunes%20Music/Nelly/Nellyville/13%20 net::ERR_FILE_NOT_FOUND

这显然是在这个特定字符串中的“#”上出错并忽略了字符串的其余部分。此格式适用于所有引用，但具有特殊字符的引用除外。我尝试了所有我能想到的编码、转义和格式，包括encodeURIComponent() 和encodeURI()。

我可以使用encodeURIComponent() 在javascript 中输出一个字符串，它会生成一个工作链接，我可以将其粘贴到我的浏览器中以正确引用该文件。但是，如果我使用来自encodeURIComponent() 的输出设置我的track.src，它会将我的项目目录添加到字符串中并且错误如下：

GET file:///Users/admin/Code/project/src/%2FUsers%2Fadmin%2FMusic%2FiTunes%2FiTunes%20Music%2FNelly%2FNellyville%2F13%20%231.mp3 net::ERR_FAILED

【问题讨论】：

失败是因为你不能在网页中使用file:// URI，除非页面本身也是从file:// URI 加载的。当您使用我假设在 localhost 上的 NodeJS 服务器时，您也需要通过 NodeJS 代理这些文件。注意目录遍历攻击。
@Dai 这是一个 Electron 应用程序，所以它会从同一个本地项目目录加载网页。我传递了没有file:// 的字符串，我只是传递了原始目录路径，如上所述，然后我猜测audio 元素正在执行某种URI 编码并添加file://。如果我不进行 URI 编码，它无法解析路径，如果我这样做，就会发生上述情况。

标签： javascript node.js html5-audio

【解决方案1】：

好的，在src 输入到<audio> 元素中可能有 100 种不同的变化之后，我确定至少在我的 Electron 应用程序中，它使用了encodeURI 和encodeURIComponent 之间的某种混合。 encodeURIComponent 编码的“/”不起作用，但encodeURI 不编码导致问题的字符，例如“#”。所以，这是我想出的方法：

function URLFormat(input){
    let URIencodedURL = encodeURIComponent(input);
    let EncodedURL = 'file:///' + URIencodedURL.replaceAll("%2F","/");
    return EncodedURL;
}

这为我提供了 <audio> 元素的正确输入路径，即使在文件包含特殊字符的情况下也是如此。

【讨论】：