如何在Flutter中检测Chrome浏览器的音频自动播放权限状态？

核心逻辑 #

Chrome的音频自动播放规则依赖用户交互状态与同域上下文，Flutter Web可通过调用浏览器原生API来判断自动播放是否被允许——核心是尝试触发一次音频播放，根据结果反推权限状态。

具体实现 #

1. 编写检测方法（基于dart:js调用浏览器API）
   利用浏览器的Audio对象尝试播放，通过是否抛出错误判断权限：

   import 'dart:js' as js;
   
   Future<bool> checkAutoplayPermission() async {
     final audio = js.JsObject(js.context['Audio']);
     audio['muted'] = true; // 用静音音频避免干扰
     try {
       await audio.callMethod('play');
       audio.callMethod('pause');
       audio.callMethod('currentTime', [0]);
       return true;
     } catch (_) {
       return false;
     }
   }
   

2. 在Widget中异步检测并切换UI
   借助FutureBuilder处理异步检测结果，实现需求中的UI分支：

   @override
   Widget build(BuildContext context) {
     return FutureBuilder<bool>(
       future: checkAutoplayPermission(),
       initialData: false, // 默认先显示点击启动页，可按需调整
       builder: (context, snapshot) {
         if (snapshot.hasData) {
           return snapshot.data! ? TheGame() : SplashScreenToClickToStartTheGame();
         }
         // 检测过程中显示加载状态
         return const Center(child: CircularProgressIndicator());
       },
     );
   }
   

3. 点击解锁音频权限
   在启动页的点击事件中，主动触发一次静音播放来解锁后续自动播放权限：

   void unlockAudioPermission(BuildContext context) async {
     final audio = js.JsObject(js.context['Audio']);
     audio['muted'] = true;
     try {
       await audio.callMethod('play');
       audio.callMethod('pause');
       Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => TheGame()));
     } catch (_) {}
   }
   

注意事项 #

• 该方案仅适用于Flutter Web，移动端音频播放规则与Web不同，通常强制需要用户交互触发。
• 测试时需在真实同域跳转场景下验证，本地开发环境的规则可能与生产环境存在差异。

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