Rails Web应用无法播放.wav文件：RoutingError/404错误

核心问题分析 #

你遇到的404错误是因为asset_path的路径写法错误，导致生成的URL指向网站根目录而非assets编译后的正确路径，同时音频文件夹可能未被asset pipeline正确识别。

具体修复步骤 #

1. 修正asset_path的路径写法 #

去掉模板中路径开头的斜杠，Rails的asset_path会自动基于assets目录查找文件：

<audio src="<%= asset_path('audios/opening.wav') %>">
  Browser not compatible
</audio>

带开头斜杠的/audios/opening.wav会让Rails直接从网站根目录查找，而非assets编译后的带哈希值路径（比如/assets/audios/opening-xxxxxx.wav）。

2. 配置asset pipeline识别音频资源 #

在config/initializers/assets.rb中添加以下配置，确保Rails能识别audios目录并预编译WAV文件：

# 将音频目录加入asset搜索路径
Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'audios')
# 让Rails预编译WAV格式文件
Rails.application.config.assets.precompile += %w( *.wav )

3. 开发环境asset服务检查（可选） #

如果开发环境仍有问题，确认config/environments/development.rb中的配置：

# 开启asset调试模式
config.assets.debug = true
# 启用静态文件服务
config.public_file_server.enabled = true

4. 处理浏览器自动播放限制 #

注意浏览器的自动播放策略：多数浏览器不允许页面加载后直接自动播放音频，必须通过用户交互（如点击按钮）触发play()方法。示例代码：

document.querySelector('#play-btn').addEventListener('click', () => {
  document.querySelector('audio').play();
});

验证方法 #

修改后重启Rails服务器，查看页面源码中audio标签的src属性，应该是类似/assets/audios/opening-xxxxxxxxxxxx.wav的路径，而非/audios/opening.wav，此时即可正常加载音频文件。

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