Angular项目中audio标签加载本地wav文件报404错误如何解决

问题根因 #

Angular 构建工具默认只会打包angular.json中assets配置项指定目录下的静态资源，其他位置的资源不会被纳入最终构建产物，因此运行时访问会返回404。

解决步骤 #

• 将你的test.wav文件移动到项目src/assets目录下
• 修正app.component.html中的audio标签代码：

<audio class="col-8" controls>
  <source src="assets/test.wav" type="audio/wav" />
</audio>

• 检查项目根目录下angular.json文件的assets配置，确保包含src/assets项，配置示例如下：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        }
      }
    }
  }
}

• 重启本地开发服务（ng serve），配置变更和新增的静态资源需要重启服务才会生效

其他异常排查 #

如果修改后还是无法访问，可检查项目index.html中的<base href>配置，如果你的项目部署在子路径下，可将音频路径调整为./assets/test.wav适配相对路径。

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