缺陷：当打开播放器快速切换歌曲时，按下暂停播放，发现歌词和背景音乐都仍在播放，这显示是不符合预期的。
原因：代码watch currentSong的变化以后做清理操作，然后执行audio.play()和获取歌曲。这里就存在一个问题——当我们快速切换的时候，canplay事件触发产生的相关操作可能在1s内就完成，也就是说，有可能先执行audio.pause()再执行watch时的audio.play()，所以就导致显示为暂停，但是它歌曲仍然在播放。
解决：因为我们是延时执行，但是在切换的时候,currentSong是快速变化的，我们要保证setTimeout里的逻辑只执行一次。
clearTimeout(this.timer); this.timer = setTimeout(() => { this.$refs.audio.play().catch((error) => { this.togglePlaying(); // eslint-disable-next-line no-alert alert(‘播放出错,暂无该歌曲资源‘); }, 1000); // 这里不直接调用currentSong.getLyric（） this.getLyric();
这样就可以保证无论currentSong变化多少次，只执行最后一次的setTimeout的，之前的setTimeout都会被清除掉。
但是光有这个逻辑也是不够的，还要修改ready的触发事件canplay改为play，就不能很快切换，保证先执行play才会触发ready，然后audio.pause肯定在这之后执行。
<audio ref="audio" :src="currentSong.url" @play="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>
缺陷：在多次切换过程中，还有可能出现歌词混乱对应不上歌曲的问题。
原因：因为getLyric方法是异步操作，当它执行到回调获取歌词的时候我们就有可能切换到下一首歌了，之前的歌词又会被new一次，相当于new了两次。
解决：我们要加个判断：当前的歌词内容是否等于获取到的歌词内容，如果相等就什么都不做。这样就保证了歌词不会乱掉。
this.currentSong.getLyric().then((lyric) => { if (this.currentSong.lyric !== lyric) { return; } this.currentLyric = new Lyric(lyric, this.handleLyric); if (this.playing) { this.currentLyric.play(); } }).catch(() => { this.currentLyric = null; this.playingLyric = ‘‘; this.currentLineNum = 0; });
缺陷：如果当前播放列表只有一首歌的时候，点下一首，按钮不会再触发ready。
原因：列表长度为1时，会调用loop方法，loop会把currentTime切到开始，play事件就不会触发了。
解决：在调用loop时直接return。
next() { // 如果没有ready好的话就直接返回 if (!this.songReady) { return; } if (this.playlist.length === 1) { this.loop(); return; } else { ...... } this.songReady = false; },
VUE移动端音乐APP学习【二十七】：player内核的修改优化
原文：https://www.cnblogs.com/Small-Windmill/p/15008885.html