部署在AWS Amplify的React应用无法播放音乐问题求助

排查资源路径问题 #

• 检查音乐文件的绝对/相对路径：本地开发时的相对路径（比如./assets/music/song.mp3）在Amplify部署后可能因静态资源基础路径变化失效。建议用React内置的process.env.PUBLIC_URL拼接路径，示例：

  <audio src={`${process.env.PUBLIC_URL}/assets/music/song.mp3`} controls />
  

• 确认静态资源存放位置：React项目的音频文件必须放在public目录下，Amplify部署时会自动映射该目录下的资源；若文件放在src目录，可能被Webpack处理后路径异常，需移至public。

配置正确的MIME类型 #

Amplify默认可能未识别部分音频格式的MIME类型，导致浏览器无法解析：

• 在项目根目录创建或修改amplify.yml，添加自定义MIME类型映射：

  frontend:
    phases:
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
  headers:
    - pattern: '*.mp3'
      headers:
        - key: Content-Type
          value: audio/mpeg
    - pattern: '*.wav'
      headers:
        - key: Content-Type
          value: audio/wav
  

• 重新触发Amplify构建部署，让配置生效。

验证音频文件完整性 #

• 通过浏览器开发者工具的Network标签，检查音频文件的请求状态码（应为200），并下载文件到本地播放，确认文件未损坏。
• 若文件损坏，大概率是部署时上传失败，重新推送音频文件到代码仓库后触发Amplify重新构建。

优化浏览器兼容性 #

• 优先使用兼容性广的音频格式（如mp3、wav），避免使用仅部分浏览器支持的格式（如ogg）。
• 在代码中提供多格式备选，让浏览器自动选择支持的源：

  <audio controls>
    <source src={`${process.env.PUBLIC_URL}/assets/music/song.mp3`} type="audio/mpeg" />
    <source src={`${process.env.PUBLIC_URL}/assets/music/song.wav`} type="audio/wav" />
  </audio>
  

检查Amplify构建配置 #

• 确认Amplify控制台的构建命令是否为npm run build，确保静态资源正确打包到build目录。
• 查看Amplify的构建日志，搜索音频文件相关的错误或警告，确认文件是否被正确复制到构建产物中。

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