关于讲解解决微信浏览器下,切换到后台再切回前台,播放器bug处理的解决办法的几点疑问

来源:7-24 播放器歌词剩余功能实现

MOonk0

2020-03-18

黄老师,您好,看完该节课程,自己复现效果时,有一些思考,希望能帮忙解答。
虽然,后来我翻阅最新的 player.vue代码,已经移除了setTimeout 的设置,但是我还是想问一下关于这里开发思路的问题,毕竟在最开始的时候,你是利用 canplay 事件来实现歌曲的自动播放。

课后我百度了下,了解到移动端浏览器会在切到后台后,或者变成不可见状态后,会直接冻结所有未激活页面上的所有定时器,结合你在课上所讲的内容,我有几个问题:


Question 1-1: 非激活标签页,事件仍然会被正常触发吗,例如 audio 标签的 end事件?


Question 1-2:如果答案是会被正常触发,那么事件的回调函数因为当时不会执行,会不会被添加到 Event loop中, 等页面变成激活状态后再依次执行吗 ? 换句话说 ,我想知道js 被冻结或者不执行的含义。


Question 1-3:我不太能理解这里加 setTimeout 解决问题的逻辑,因为按照已获得的信息,歌曲在后台播放完后,就理解触发了 end 事件,但此时 js 不会执行,等切回前台,因为没有 end 事件,歌曲不会改变。也就不会触发 currentSong的变化,那么这里加 setTimeout 的意义是什么呢?


Question 1-4:因为现在的 music 应用里,后台播放完一个音乐,虽然新版会切换到下一首,但是不会自动播放歌曲,我的思考的解决办法是,在页面触发 document.visibilitychange 事件时加一个时间戳和当时歌曲的 currentTime,那么再切回来的时候,那当前的时间戳和离开时记录的时间戳作对比,计算时间差,如果歌曲已经播放完了,就可以手动的执行 next 方法,然后继续播放,这个思路是否可行?


Question 1-5: 如果我想实现后台音乐自动播放,并且可以自动切换歌曲,回到前台后,显示信息仍然可以正确显示,是否可以,如果可以的话,大致思路是怎样的


Question 1-6:以上我的想法,都是基于拿着手机一点点的尝试,观察结果后想的,请问有没有什么模拟方法可以在手机上测试的时候,可以看到控制台的内容?

谢谢。

写回答

1回答

ustbhuangyi

2020-03-18

我又大概测试了一下,在后台的时候,事件能被正常触发,js 也执行了,切到了下一首,但歌曲不能正常播放,这个应该是 webview 内核的限制。如果你想在手机上看到控制台内容,可以用这个工具:https://github.com/Tencent/vConsole

0
0

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3805 问题

查看课程