前一段时间一起漫部项目迎来一个新需求，在进入粉丝会主页时需要自动播放一段语音，而且需要支持Android、IOS、微信公众号、Web。于是我们开始预研，发现audioplayers这个插件非常符合我们需求，使用简单并且支持iOS、Android 和 Web 平台。
本以为使用这个插件就能完成，没想到实际使用中有很多平台限制，插件并没有帮你处理，需要我们自己去处理。

开始使用：

    AudioPlayer audioPlayer = AudioPlayer();
    audioPlayer.play(UrlSource(sourceUrl));
    

使用还是很简单的，两行代码就搞定了。如果你以为到这就圆满成功那就高兴太早了，接下来就来说一说我们遇到的一些坑~

遇到问题：

1、在IOS设备上播放声音特别小，起初以为没有播放成功，后来发现声音是从听筒出来了，所以声音很小。

解决方案是需要给应用配置音频会话，使用这个插件audio_session可以让声音从扬声器出来，完美解决了这个问题。

    final AudioSession session = await AudioSession.instance;
    await session.configure(const AudioSessionConfiguration.music());
    audioPlayer.play(UrlSource(sourceUrl));
    

2、因为苹果的限制在web中不能自动播放音频，只能通过用户手动点击播放。

这个问题是比较棘手的，我们尝试过很多种方法，最终解决了。下面来梳理一下解决方案
1、通过微信JS-SDK，在ready回调方法中可以实现自动播放音频(仅限微信中使用，浏览器不行)

    wx.config(
          debug: false,
          appId: '',
          timestamp: '',
          nonceStr: '',
          signature: '',
          jsApiList: [],
       );
    wx.ready(() {
          audioPlayer.play(UrlSource(sourceUrl));
       });
       

2、因为我们的项目还会在浏览器中使用，所以研究我们尝试了网上提到最多的一种方式。这个方案在flutter并没有解决问题，主要是onLoad的触发时机不对，没有回调onload方法，有兴趣的可以深入研究一下。

    //先设置播放源
    audioPlayer.setSource(UrlSource(sourceUrl));
    final AudioElement? audio = html.document.getElementById('audio') as AudioElement?;
    //先设置静音
    audio?.muted = true;
    html.window.onLoad.listen((html.Event event) {
        //开始播放
        resume();
        //取消静音
        audio?.muted = false;
    });
    

3、在进入需要播放页面的点击事件里面开始播放音频，因为这里是用户主动触发的，所以在微信和浏览器中都是可行的，

欢迎大家在留言区交流探讨，研究更好的方案。