html5歌词⾃动滚动效果，简单的HTML5⾳乐播放器（带歌词滚
动）
1 var musicPlayer = function() {
2 return this.init.apply(this, arguments);
3 };4
html滚动效果代码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
=ateDocumentFragment(),40 tmpArr,41 i,42 len;43 this.lrcArea.innerHTML = ‘‘;44 frag.appendChild(ul);45 ul.id = ‘c‘;46 this.lrcArea.appendChild(frag);47
48 var txt =place(re,49 function(a, b, c) {50 return b + (c === undefined ? ‘ ‘: c) + ‘\n‘;51 });52
53 tmpArr = txt.split(‘\n‘);54
55 //处理歌词
56 for (i = 0, len = tmpArr.length; i < len; i++) {57 var item =trim(tmpArr[i]);58 if (item.length > 0) {59
this.lrcArr.push(item);60 }61 }62
63 frag =ateDocumentFragment();64
65 for (i = 0, len = this.lrcArr.length; i < len; i++) {66 var li = cEl(‘li‘);67 if (i === 0) {68 li.className = ‘cur‘;69 }70
li.innerHTML = this.lrcArr[i].replace(/\[.+\]/i, ‘‘);71 //处理时间
72 this.timestamp.push(this.lrcArr[i].replace(re,73 function(a, b, c) {74 returnb;75 }).replace(‘[‘, ‘‘).replace(‘]‘,
‘‘));76 frag.appendChild(li);77 }78
79 ul.appendChild(frag);80 this.li = $(‘lrcArea‘).getElementsByTagName(‘li‘);81 },82 //播放
83 play: function() {84 this.stop = false;85 var that = this,86 player = this.player,87 i, len;88
89 this.t = setInterval(function() {90 if (that.stop) return;91 that.curTime =player.currentTime;92
93 for (i = 0, len = that.timestamp.length - 1; i < len; i++) {94 var prevTime =that.formatTimeStamp(that.timestamp[i]),95 nextTime = that.formatTimeStamp(that.timestamp[i + 1]);96 //当前播放时间与前后歌词时间⽐较，如果位于这两者之间则转到该歌词
97 if (parseFloat(that.curTime) > prevTime && parseFloat(that.curTime)
106 pause: function() {107 this.stop = true;108 clearInterval(this.t);109 },110 //格式化时间
111 formatTimeStamp: function(timestamp) {112 var re = /([0-9]+):([0-9]+)\.([0-9]+)/i,113 seconds
=place(re,114 function(a, b, c, d) {115 return Number(b * 60) + Number(c) + parseFloat(‘0.‘ +d);116 });117 returnseconds;118 },119 //歌词滚动
120 scrollToLrc: function(idx) {121 var ds = getOffset(this.li[idx]).top,122 i,123 len;124 //如果歌词索引没有变动，则认为这句没有唱完，不处理
125 if (this.idx === idx) return;126 //否则更新索引值并更新样式和位置
127 this.idx =idx;128 for (i = 0, len = this.li.length; i < len; i++) {129 this.li[i].className = ‘‘;130 }131
this.li[idx].className = ‘cur‘;132 this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;133 }134 };135
136 function$(id) {137 return typeof id === ‘string‘ ?ElementById(id) : id;138 }139 functioncEl(el) {ateElement(el);141 }142 functiontrim(str) {143 place(/(^\s*)|(\s*$)/g, "");144 }145 functionisEmptyObj(o) {146 for (var p in o) return false;147 return true;148 }149 functiongetOffset(el) {150 var parent
=el.offsetParent,151 left =el.offsetLeft,152 top =el.offsetTop;153
154 while (parent !== null) {155 left +=parent.offsetLeft;156 top +=parent.offsetTop;157 parent =parent.offsetParent;158 }159
160 return{161 left: left,162 top: top163 };164 }165
166 var p = newmusicPlayer({167 player: $(‘player‘),168 lrc: $(‘lrc‘).innerHTML,169 lrcArea: $(‘lrcArea‘)170 });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。