Flutter网页端如何实现启动时自动播放音频？

一、Flutter层面的合规方案（无需修改HTML） #

• 靠用户首次交互触发播放：在游戏启动页加个「开始游戏」按钮，或者监听页面首次点击/触摸事件，在回调里初始化并播放背景音乐——这是最符合Chrome政策的方式，不会被浏览器拦截。
  示例代码：

  import 'package:audioplayers/audioplayers.dart';
  
  final player = AudioPlayer();
  
  @override
  void initState() {
    super.initState();
    // 先预加载音频，不播放
    player.setSource(AssetSource('bgm.mp3'));
  }
  
  // 绑定到用户交互事件，比如按钮点击
  void onGameStart() {
    player.play(AssetSource('bgm.mp3'));
  }
  

• 监听Web端全局交互：如果不想加按钮，可通过dart:html库监听页面全局点击事件，首次触发后播放音频：

  import 'dart:html' as html;
  import 'package:audioplayers/audioplayers.dart';
  
  final player = AudioPlayer();
  
  @override
  void initState() {
    super.initState();
    // 预加载音频
    player.setSource(AssetSource('bgm.mp3'));
    // 监听首次点击
    html.document.body?.onClick.first.then((_) {
      player.play(AssetSource('bgm.mp3'));
    });
  }
  

二、修改构建后HTML的通用技巧 #

如果想尝试非合规的"自动播放"（稳定性差，可能被政策封杀），可以修改Flutter构建后的index.html：

• 在<body>中添加音频元素，通过JS先静音播放再取消静音（部分场景下可行，但依赖浏览器版本）：

  <audio id="bgm" src="assets/assets/bgm.mp3" preload="auto" loop></audio>
  <script>
    window.addEventListener('load', () => {
      const bgm = document.getElementById('bgm');
      bgm.muted = true;
      bgm.play().then(() => {
        setTimeout(() => bgm.muted = false, 100);
      }).catch(err => console.log('播放被拦截:', err));
    });
  </script>
  

  注意：这种方法随时可能失效，不建议作为核心方案。

关键提醒 #

Chrome的自动播放政策核心是禁止无用户交互的音频自动播放，任何绕开技巧都存在失效风险。最稳妥的方式还是通过用户主动交互触发播放，既符合规则，也不会影响用户体验。

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