Spring Boot如何配置音频文件访问路径以支持HTML audio标签引用？

基础路径规则 #

要实现src="audio/audio_name"格式的直接引用，核心要求是：audio文件夹必须放在你当前web服务的静态资源根目录下，你写的相对路径是相对于静态资源根目录或者当前HTML文件的访问路径。

resources目录访问404的原因 #

绝大多数项目的resources目录属于项目源码目录，本身不会被web服务器直接对外暴露，不会作为可访问的路径前缀，所以你访问带/resources的路径自然返回404。

分场景配置方案 #

• 纯静态前端项目（直接用IDE打开、Nginx/Apache部署）
  把audio文件夹和引用音频的HTML文件放在同一级目录即可，无需额外配置即可直接用src="audio/音频文件名"引用。如果用Nginx部署，确认配置文件中root指向的目录下存在audio文件夹即可。
• SpringBoot等Java后端项目
  1. 将audio文件夹放到src/main/resources/static目录下，完整路径为src/main/resources/static/audio/xxx.mp3
  2. 如果你自定义了WebMvcConfigurer静态资源拦截规则，需要添加路径放行配置：

  registry.addResourceHandler("/audio/**")
          .addResourceLocations("classpath:/static/audio/");
  

  3. 配置完成后直接用src="audio/音频文件名"引用，访问路径为http://localhost:9191/audio/音频文件名，无需加/resources前缀。
• Vue/React等工程化前端项目
  把audio文件夹放到项目的public目录下，打包后audio文件夹会自动输出到构建产物的根目录，部署后直接用src="audio/音频文件名"引用即可。

排查方法 #

• 优先直接在浏览器地址栏访问http://localhost:9191/audio/你的音频完整文件名（含后缀），确认可以正常播放后再写到audio标签的src属性中
• 检查文件名大小写、后缀名是否和实际文件完全一致，Linux环境下的服务器对路径大小写敏感

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