含井号(#)的音频源无法播放的JavaScript技术问题

这个问题我太熟悉了——#在URL里是片段标识符（也就是锚点），浏览器会自动把它当成页面内跳转的标记，而不是文件路径的一部分！哪怕你控制台输出的路径看起来完全正确，实际发送的HTTP请求里，#后面的内容都会被浏览器忽略，导致请求的文件路径不对，自然就抛出了媒体资源不兼容的错误。

至于你尝试用\#替换的方法没用，是因为\只是JavaScript字符串的转义符，转义后传给浏览器的依然是#，浏览器处理URL的时候根本不认这种转义方式，必须用URL编码来处理特殊字符。

给你两个可行的解决方案：

方案1：用encodeURIComponent编码参数（推荐） #

这个方法会自动处理所有URL特殊字符（包括#、空格、&等），通用性极强：

function playNote(note) {
  // 对note参数进行URL编码
  let encodedNote = encodeURIComponent(note);
  let audio = new Audio();
  audio.src = "res/tones/" + encodedNote + ".mp3";
  console.log("res/tones/" + encodedNote + ".mp3");
  audio.play();
}

比如你的note是C#，编码后会变成C%23，浏览器就会正确请求res/tones/C%23.mp3，而不会把#当成锚点截断路径。

方案2：手动替换#为%23 #

如果确定只有#这一种特殊字符，也可以直接替换：

function playNote(note) {
  // 把所有#替换成它的URL编码%23
  let encodedNote = note.replace(/#/g, "%23");
  let audio = new Audio();
  audio.src = "res/tones/" + encodedNote + ".mp3";
  console.log("res/tones/" + encodedNote + ".mp3");
  audio.play();
}

这个方法只针对#生效，适合当前场景，但如果以后note里出现其他特殊字符（比如带空格的文件名），就需要额外处理，所以更推荐方案1。

替换后再测试，你应该就能正常播放带#的音频文件了！

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