如何在Flutter Web中使用assets_audio_player实现音频播放

问题根本原因 #

• 浏览器跨域资源共享（CORS）限制：本地调试时域名环境不会触发跨域拦截，部署到正式域名后，Firebase存储资源默认未配置允许你的站点跨域访问，音频资源加载会被浏览器拦截
• assets_audio_player Web端加载逻辑和移动端存在差异，部分配置项需要单独适配
• Flutter Web打包后会重写静态资源路径，直接使用移动端的本地资源路径会找不到对应文件
• 现代浏览器默认禁止非用户交互触发的音频自动播放，未经点击/触摸等操作触发的播放会被拦截

具体适配步骤 #

1. 配置Firebase存储的跨域规则 #

在本地创建cors.json配置文件，填入以下内容：

[
  {
    "origin": ["你的Web应用部署域名", "http://localhost:*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

通过Firebase CLI执行命令生效配置：
gsutil cors set cors.json gs://你的Firebase存储桶名称

2. 调整音频加载代码适配Web端 #

加载远程Firebase音频

调用时显式指定Web端专属配置：

import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:flutter/foundation.dart';

final audio = Audio.network(
  "Firebase音频资源链接",
  playInWeb: true,
  headers: {
    "Accept": "audio/*"
  },
);

// 播放逻辑和移动端保持一致
final player = AssetsAudioPlayer();
await player.open(audio);

加载本地assets音频

Flutter Web打包后本地静态资源默认存放在/assets/assets/路径下，需要做平台适配：

Audio getLocalAudio(String assetPath) {
  if (kIsWeb) {
    return Audio("assets/$assetPath");
  }
  return Audio(assetPath);
}

// 调用示例：音频文件存放在项目assets/audios/demo.mp3时，传入参数为"audios/demo.mp3"

3. 规避浏览器自动播放限制 #

首次播放音频必须绑定到用户的点击、触摸等主动交互事件中，禁止在页面初始化完成后直接调用播放方法，否则会被浏览器拦截。

4. 本地验证修复效果 #

部署前执行命令本地启动Release模式Web服务验证：
flutter run -d chrome --release
本地验证正常后再部署到正式环境，可避免路径类问题。

内容的提问来源于stack exchange，提问作者Thắng Phạm