flutter的 just_audio 包在web端微信浏览器切换歌曲时报错，没有声音的解决文案。-flutter的justaudio包在web端微信浏览器切换歌曲时报错没有声音的解决文案

最新推荐文章于 2023-08-10 00:08:15 发布

weixin_46400688

最新推荐文章于 2023-08-10 00:08:15 发布

阅读量266

点赞数

文章标签： flutter 前端 android

本文链接：https://blog.csdn.net/weixin_46400688/article/details/130971295

版权

title: flutter的 just_audio 包在web端微信浏览器切换歌曲时报错，没有声音的解决文案。
date: 2023-01-27 16:42:14.078
updated: 2023-01-27 17:05:01.718
url: https://hexo.start237.top/archives/flutter的justaudio包在web端微信浏览器切换歌曲时报错没有声音的解决文案
categories:

IT技术
tags:
flutter
javascript
h5

问题

在测试发光如星时，发出在移动端微信浏览浏览器下，切换歌曲后，虽然显示正常进度条也在走但是没有声音。
其他手机浏览器谷歌、Edg、均表现正常。
目前微信浏览器在国内是使用最频繁的，在 matoma 后台统计中访问网站最多的是微信浏览器。
这就不得不debug一下喽。

解决思路

由于在开发环境和PC端都无法复现bug。所以只有安装插件vconsole.js，来分析在微信浏览器下的报错。根据报错判断代码那里出现了问题。

<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
<script>
function webDebug(){
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
}
</script>

写好代码后，部署一下正式环境。复现一下切换歌曲的操作会发现第一次没有问题，在跳转一下就会出现问题。
[外链图片转存中…(img-tt5Yszjy-1685520501604)]
🙂完全看不懂。由于是开发环境，没有办法看到是dart的那句代码出现问题。只有靠梳理代码来解决问题了。
使用排除方法。最后定位到一个问题，就是只有在当前音乐是播放的状态的情况下跳转才会出现这个问题。虽然对浏览器的性能了解不深。但是会猜测到是微信浏览器的引擎的问题。这种底层问题，我没法解决。所以只有另外封装出just_audio的 seek seekToPrevious seekToNext方法来解决这个问题
思路也很简单，只有在播放的状态下去切歌才会出现这种问题，那么，就在切歌的时候判断一下当前的播放状态。如果是true那么就先停止，然后在执行切歌。切歌只后在判断保存的上一个播放状态的变量。如果是true在执行播放即可。具体代码如下

Future<void> seek(int index) async {
    if (index != player.value.currentIndex) {
      var prePlaying = player.value.playing;
      if(prePlaying){
        await player.value.stop();
        await Future.delayed(Duration.zero);
      }
      await player.value.seek(Duration.zero,index:index);
      if(prePlaying){
        player.value.play();
      }
    }

  }