简单的HTML5⾳乐播放器（带歌词滚动）⾃信可改变未来问谁⼜能做到
可否不分肤⾊的界线
愿这⼟地⾥
问谁⼜能做到
今天只有残留的躯壳
迎接光辉岁⽉风⾬中抱紧⾃由
⼀⽣经过彷徨的挣扎
⾸先需要整理好lrc 格式的歌词放到script 标签中以供程序处理。然后把⾳乐链接放到audio 的src 属性⾥就可以了。源码：HTML 部分 JS 部分
24false);
25
26this.player.addEventListener('pause',
27function() {
28            that.pause();
29        },
30false);
31
32//歌词索引
33this.idx = 0;
34    },
35//格式化歌词
36    handleLrc: function(lrc) {
37var re = /(\[.+\])(.+)?/gm,
38        ul = cEl('ul'),
39        frag = ateDocumentFragment(),
40        tmpArr,
41        i,
42        len;
43this.lrcArea.innerHTML = '';
44        frag.appendChild(ul);
45        ul.id = 'c';
46this.lrcArea.appendChild(frag);
47
48var txt = place(re,
49function(a, b, c) {
50return b + (c === undefined ? ' ': c) + '\n';
51        });
52
53        tmpArr = txt.split('\n');
54
55//处理歌词
56for (i = 0, len = tmpArr.length; i < len; i++) {
57var item = trim(tmpArr[i]);
58if (item.length > 0) {
59this.lrcArr.push(item);
60            }
61        }
62
63        frag = ateDocumentFragment();
64
html播放音乐代码65for (i = 0, len = this.lrcArr.length; i < len; i++) {
66var li = cEl('li');
67if (i === 0) {
68                li.className = 'cur';
69            }
70            li.innerHTML = this.lrcArr[i].replace(/\[.+\]/i, ''); 71//处理时间
72this.timestamp.push(this.lrcArr[i].replace(re,
73function(a, b, c) {
74return b;
75            }).replace('[', '').replace(']', ''));
76            frag.appendChild(li);
77        }
78
79        ul.appendChild(frag);
80this.li = $('lrcArea').getElementsByTagName('li');
81    },
82//播放
84this.stop = false;
85var that = this,
86        player = this.player,
87        i, len;
88
89this.t = setInterval(function() {
90if (that.stop) return;
91            that.curTime = player.currentTime;
92
93for (i = 0, len = that.timestamp.length - 1; i < len; i++) {
94var prevTime = that.formatTimeStamp(that.timestamp[i]),
95                nextTime = that.formatTimeStamp(that.timestamp[i + 1]);
96//当前播放时间与前后歌词时间⽐较，如果位于这两者之间则转到该歌词
97if (parseFloat(that.curTime) > prevTime && parseFloat(that.curTime) < nextTime) { 98                    that.scrollToLrc(i);
99return;
100                }
101            }
102        },
103        300);
104    },
105//暂停
106    pause: function() {
107this.stop = true;
108        clearInterval(this.t);
109    },
110//格式化时间
111    formatTimeStamp: function(timestamp) {
112var re = /([0-9]+):([0-9]+)\.([0-9]+)/i,
113        seconds = place(re,
114function(a, b, c, d) {
115return Number(b * 60) + Number(c) + parseFloat('0.' + d);
116        });
117return seconds;
118    },
119//歌词滚动
120    scrollToLrc: function(idx) {
121var ds = getOffset(this.li[idx]).top,
122        i,
123        len;
124//如果歌词索引没有变动，则认为这句没有唱完，不处理
125if (this.idx === idx) return;
126//否则更新索引值并更新样式和位置
127this.idx = idx;
128for (i = 0, len = this.li.length; i < len; i++) {
129this.li[i].className = '';
130        }
131this.li[idx].className = 'cur';
132this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
133    }
134};
135
136function $(id) {
137return typeof id === 'string' ? ElementById(id) : id;
138}
139function cEl(el) {
ateElement(el);
141}
View Code

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