Flutter Web部署Firebase后just_audio报‘Failed to load URL’错误

AI 小北

2026-6-26

Flutter Web部署Firebase Hosting后just_audio加载本地音频失败的解决方案

以下是几个可能的原因及对应解决方法：

1. 确认pubspec.yaml的assets配置正确

确保pubspec.yaml中已正确声明音频资源路径，示例配置如下：

flutter:
  assets:
    - assets/se/

注意路径结尾的斜杠，这会包含该目录下所有文件。执行flutter build web --release打包后，检查build/web/assets/se/目录下是否存在match.mp3，确认资源已被正确纳入打包产物。

2. 修正Firebase Hosting的MIME类型配置

Firebase Hosting默认可能未正确识别mp3文件的Content-Type，导致浏览器无法正常加载音频。在firebase.json中添加headers配置：

{
  "hosting": {
    "public": "build/web",
    "headers": [
      {
        "source": "**/*.mp3",
        "headers": [
          {
            "key": "Content-Type",
            "value": "audio/mpeg"
          }
        ]
      }
    ]
  }
}

配置完成后重新部署：firebase deploy

3. 调整just_audio的资源路径写法

Flutter Web环境下，asset:///协议的解析存在兼容性问题，建议改用基于当前页面URL的绝对路径方式加载：

static Future<void> setSeMatch() async{
  try {
    final audioUri = Uri.base.resolve('assets/se/match.mp3');
    await player.setAudioSource(
      AudioSource.uri(audioUri), 
      initialPosition: Duration.zero, 
      preload: true
    );
  } catch (e) {
    print('Error setSeMatch: $e');
  }
}

这种方式会自动适配Web环境下的资源实际路径，避免协议解析错误。