html5 歌词自动滚动效果,简单的HTML5音乐播放器(带歌词滚动)

转载

于 2021-05-31 04:01:09 发布 · 1.4k 阅读

文章标签：

这个博客介绍了一个使用HTML5实现的音乐播放器，具备歌词自动滚动功能。通过创建musicPlayer函数，初始化播放器、歌词和歌词区域，并处理歌词使其适应播放器。当音乐播放或暂停时，相应地更新歌词滚动。代码中还包括了歌词的格式化、时间戳处理和滚动定位等关键逻辑。

1 var musicPlayer = function() {2 return this.init.apply(this, arguments);3 };4

5 musicPlayer.prototype ={6 constructor: musicPlayer,7 init: function(options) {8 if (isEmptyObj(options) || typeof options !== 'object') return;9 this.player =options.player;10 this.lrc =options.lrc;11 this.lrcArea =options.lrcArea;12 //用于保存歌词

13 this.lrcArr =[];14 //用于保存时间戳

15 this.timestamp =[];16 //处理歌词

17 this.handleLrc(this.lrc);18 var that = this;19

20 this.player.addEventListener('play',21 function() {22 that.play();23 },24 false);25

26 this.player.addEventListener('pause',27 function() {28 that.pause();29 },30 false);31

32 //歌词索引

33 this.idx = 0;34 },35 //格式化歌词

36 handleLrc: function(lrc) {37 var re = /([.+])(.+)?/gm,38 ul = cEl('ul'),39 frag =document.createDocumentFragment(),40 tmpArr,41 i,42 len;43 this.lrcArea.innerHTML = '';44 frag.appendChild(ul);45 ul.id = 'c';46 this.lrcArea.appendChild