kikoeru-project / kikoeru-quasar Goto Github PK

切换缩略图/卡片的按钮被挤出屏幕外了，导致无法切换

togglePlaying 按钮只是单方面维护了自己的状态，并在用户点击播放/暂停按钮时通知 vue-plyr 元素

    playing (flag) {
      if (this.player.duration) {
        // 缓冲至可播放状态
        flag ? this.player.play() : this.player.pause()
      }
      this.playLrc(flag);
    },

这就导致，如果通过其他途径（例如移动设备的控制中心、耳机的线控等）暂停播放，则 togglePlaying 按钮仍然是播放状态

建议修改方案：
播放状态由 vue-plyr 自下而上进行管理，并在 AudioPlayer 内设置监听，用于改变播放按钮当前状态。
通过这种方式，也能实现因加载而暂停的同时暂停字幕播放

系统ios14
浏览器chrome
发生在切歌或跳进度时，如果网速较慢，导致音频加载迟缓，字幕就会先行一步

从 #9 引入的问题

设备：移动端 chrome
复现方法：进入音频后，快速多次点击进度条触发 seek

分析：
在部分浏览器上，seek 会触发 onPause 钩子，
缓冲结束后，播放器会强制继续播放（触发 onPlay 钩子）

但是 onPause、onPlay 用来 反映播放器状态 的属性 playing 同时也是 控制播放器播放 的属性

这就导致 playing 内部形成了一个闭环控制

这个问题可以在 华为 P30 Chrome 浏览器上复现。
附一段视频
https://files.catbox.moe/qxnrt7.mp4

解决方案：
分离播放器实际状态 playing 和 用户控制状态 wantPlaying