本地HTML调用Audio播放音频报错"The element has no supported sources"

你遇到的是现代浏览器针对file://协议的默认安全限制：直接打开本地HTML文件时，浏览器会禁止页面加载同目录下的其他本地资源（包括音频、视频、JSON等），防止恶意网页窃取本地文件，所以哪怕路径完全正确，音频也不会被加载，会出现控件灰色、调用play()报错、Sources面板看不到音频文件的现象。

方案1（推荐）：启动本地开发服务器运行项目 #

所有前端项目都推荐用本地服务器调试，完全规避跨域/资源加载限制，有几种快速实现方式：

• 如果你安装了Node.js，在项目根目录打开终端执行npx serve，访问终端输出的http://localhost:3000地址即可
• 如果你安装了Python，在项目根目录打开终端执行对应命令：
  • Python3：python -m http.server
  • Python2：python -m SimpleHTTPServer
    执行后访问http://localhost:8000即可
• 如果你用VS Code编写代码，直接搜索安装「Live Server」插件，右键HTML文件选择「Open with Live Server」即可一键启动服务打开页面

方案2：临时修改浏览器启动参数（仅测试用） #

如果确实需要直接用file://协议打开调试，可以修改浏览器启动参数放开本地资源访问限制：

1. 找到Chrome/Edge浏览器的桌面快捷方式，右键选择「属性」
2. 在「目标」输入框的原有内容末尾，加一个空格后填入--allow-file-access-from-files
3. 关闭所有已打开的浏览器进程，用修改后的快捷方式启动浏览器，再打开本地HTML文件即可
   注意：该配置仅用于本地开发测试，日常浏览网页不要用该启动方式，存在安全风险

Web路径统一使用正斜杠/作为分隔符，你代码里的反斜杠\\是Windows本地路径的写法，要改成标准的Web路径格式：

this.collect_wav = new Audio("Sounds/Coin.wav");

同时确认Coin.wav文件名的大小写和代码中完全一致，避免部署到Linux/macOS服务器时出现大小写不匹配的加载错误。

内容的提问来源于stack exchange，提问作者I Like Python