Firefox加载同目录音频文件仍触发跨域错误求助

问题场景 #

作为HTML音频开发新手，参照教程编写了如下代码：

<audio src="track.mp3"></audio>
<button onclick="playTrack()">Play</button>

<script>
function playTrack(){
    const audioElement = document.querySelector("audio");  
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioContext = new AudioContext();
    //audioElement.play()
    const track = audioContext.createMediaElementSource(audioElement);
    track.connect(audioContext.destination);
    }
</script>

在Firefox中运行时抛出错误：

The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.

添加crossorigin="anonymous"属性到<audio>标签后，出现新错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/user/Desktop/track.mp3. (Reason: CORS request not http).

疑问：MP3和HTML在同一目录，且通过按钮触发播放，为何仍有跨域问题？且直接调用audioElement.play()时音频可正常播放。

原因分析 #

1. file://协议的CORS限制：浏览器对本地file://协议的安全限制极严，Web Audio API的createMediaElementSource会触发严格的CORS检查，但file://协议本身不支持CORS机制（CORS是为HTTP/HTTPS设计的），哪怕文件在同一目录，也会被判定为跨域资源。
2. 两种播放方式的安全规则差异：直接调用audioElement.play()属于HTML原生媒体播放，浏览器对这种场景的跨域检查更宽松，允许本地文件直接播放；而Web Audio API涉及媒体数据的处理，出于安全考虑强制要求符合CORS规则。

解决方案 #

• 启动本地HTTP服务器：将文件放在本地HTTP服务下访问，比如：
  • Python 3：在文件目录执行python -m http.server 8000，然后访问http://localhost:8000
  • Node.js：先安装http-server（npm install -g http-server），再执行http-server，访问对应地址
    这样通过HTTP协议访问，同一目录下的资源不会触发跨域问题。
• 无需Web Audio时简化代码：如果只是单纯播放音频，不需要音效处理等Web Audio功能，直接使用audioElement.play()即可，无需创建AudioContext相关节点。

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