如何正确设置HTML5 Audio元素的文件引用格式以兼容特殊字符？

1. 未编码的#是URL的片段标识符，浏览器会把#之后的内容识别为URL片段而非路径部分，直接赋值会导致路径被截断
2. 直接对整个绝对路径使用encodeURIComponent()会把路径开头的/转义为%2F，浏览器无法识别这是绝对路径的起始，会将其判定为相对当前页面的路径，自动拼接项目目录前缀

方案1：使用URL构造器自动处理（最简便） #

直接通过URL构造器生成标准file协议链接，会自动完成特殊字符的转义，同时保留路径的绝对路径属性：

// 从数据库拿到的原始路径
const rawPath = '/Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3'
// 生成标准file协议URL
const audioSrc = new URL(`file://${rawPath}`).href
// 直接赋值给audio元素
track.src = audioSrc

方案2：手动分段编码 #

如果需要手动控制编码逻辑，仅对路径的每一段内容编码，保留路径分隔符/不被转义：

const rawPath = '/Users/admin/Music/iTunes/iTunes Music/Nelly/Nellyville/13 #1.mp3'
// 拆分路径段，过滤空值
const pathSegments = rawPath.split('/').filter(Boolean)
// 逐段编码后拼接，补全file协议前缀
const encodedSrc = 'file:///' + pathSegments.map(seg => encodeURIComponent(seg)).join('/')
track.src = encodedSrc

两种方案最终生成的有效路径格式为：
file:///Users/admin/Music/iTunes/iTunes%20Music/Nelly/Nellyville/13%20%231.mp3
可直接被audio元素正常加载。

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