用Vue來實現音樂播放器(三十八):歌詞滾動列表的問題


1、頻繁切換歌曲時,歌詞會跳來跳去

原因:

// 歌詞跳躍是因為內部有一個currentLyric對像內部有一些功能來完成歌詞的跳躍
//每個currentLyric能實現歌曲的播放跳到相應的位置 是因為它內部有個計時器
//每次currentSong改變的時候都會重新new一個新的lyric-parser出來,
//但是我們之前的對象並沒有做清理操作 也就是說我們之前對象還是有計時器在里面
//所以歌詞會來回閃動
解決辦法:
在切換歌曲之前 即getLyric()之前 重新去getLyric()之前
//我們要把當前的currentLyric給stop掉

2、還有一個bug 當我們點擊暫停按鈕的時候 歌詞仍然會跳動 此時我們需要在togglePlaying()中解決

 

 3、當播放狀態為循環播放的時候  當播放時間為剛開始的時候  歌詞並沒有回到最初的位置  在loop函數中實現

 

4、當調整播放進度的時候  歌詞進度並沒有改變   解決辦法:在onProgressBarChange()中添加一下邏輯

5、在cd下方顯示當前歌詞

 

 

 

 

 6、考慮異常情況

7、當歌曲列表只有一首歌的時候 執行next函數的時候

解決辦法:當列表只有一首歌曲的時候  直接讓它循環播放即可

同樣prev()也是一樣的邏輯 在只有一首歌曲的前提下讓它單曲循環

8、當我們在微信里面播放的時候 如果微信到后台了  實際上js是不會執行的 js不執行但audio是可以將當前歌曲播放完的  一旦當前歌曲播放完畢會去觸發end事件  但是end不會被執行因為是js  如果end不執行 那么我們再次播放的時候songReady就一直不會設置為true  如果songReady不置為true 那么我們就切換不了 

 

9、此時下面的迷你播放器是占高度的  所以我們以前的滾動距離的計算就會出現問題

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM