简单的HTML5音乐播放器(带歌词滚动)

 

//
// 0) {
this.lrcArr.push(item);
}
}

frag = document.createDocumentFragment();

for(i = 0,len = this.lrcArr.length; i ','').replace('//','');
//处理时间
this.timestamp.push(this.lrcArr[i].replace(re,function(a,b,c) {
return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);
}

ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');
},
//播放
play:function() {
this.stop = false;
var that = this,
player = this.player,
i,len;

this.t = setInterval(function() {
if(that.stop) return;
that.curTime = player.currentTime;

for(i = 0,len = that.timestamp.length - 1; i prevTime && parseFloat( that.curTime )

首先需要整理好lrc格式的歌词放到script标签中以供程序处理。然后把音乐链接放到audio的src属性里就可以了。

源码：

HTML部分

 <div class="container">
      <audio id="player" src="test.mp3" loop controls preload></audio>
      <div id="lrcArea"></div>
 </div>

 <script id="lrc" type="text">
 //lrc歌词
 </script>

JS部分

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

 musicPlayer.prototype = {
     constructor: musicPlayer,
     init: function(options) {
         if (isEmptyObj(options) || typeof options !== 'object') return;
         this.player = options.player;
         this.lrc = options.lrc;
         this.lrcArea = options.lrcArea;
         //用于保存歌词
         this.lrcArr = [];
         //用于保存时间戳
         this.timestamp = [];
         //处理歌词
         this.handleLrc(this.lrc);
         var that = this;

         this.player.addEventListener('play',
         function() {
             that.play();
         },
         false);

         this.player.addEventListener('pause',
         function() {
             that.pause();
         },
         false);

         //歌词索引
         this.idx = 0;
     },
     //格式化歌词
     handleLrc: function(lrc) {
         var re = /(\[.+\])(.+)?/gm,
         ul = cEl('ul'),
         frag = document.createDocumentFragment(),
         tmpArr,
         i,
         len;
         this.lrcArea.innerHTML = '';
         frag.appendChild(ul);
         ul.id = 'c';
         this.lrcArea.appendChild(frag);

         var txt = lrc.replace(re,
         function(a, b, c) {
             return b + (c === undefined ? ' ': c) + '\n';
         });

         tmpArr = txt.split('\n');

         //处理歌词
         for (i = 0, len = tmpArr.length; i < len; i++) {
             var item = trim(tmpArr[i]);
             if (item.length > 0) {
                 this.lrcArr.push(item);
             }
         }

         frag = document.createDocumentFragment();

         for (i = 0, len = this.lrcArr.length; i < len; i++) {
             var li = cEl('li');
             if (i === 0) {
                 li.className = 'cur';
             }
             li.innerHTML = this.lrcArr[i].replace(/\[.+\]/i, '');
             //处理时间
             this.timestamp.push(this.lrcArr[i].replace(re,
             function(a, b, c) {
                 return b;
             }).replace('[', '').replace(']', ''));
             frag.appendChild(li);
         }

         ul.appendChild(frag);
         this.li = $('lrcArea').getElementsByTagName('li');
     },
     //播放
     play: function() {
         this.stop = false;
         var that = this,
         player = this.player,
         i, len;

         this.t = setInterval(function() {
             if (that.stop) return;
             that.curTime = player.currentTime;

             for (i = 0, len = that.timestamp.length - 1; i < len; i++) {
                 var prevTime = that.formatTimeStamp(that.timestamp[i]),
                 nextTime = that.formatTimeStamp(that.timestamp[i + 1]);
                 //当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
                 if (parseFloat(that.curTime) > prevTime && parseFloat(that.curTime) < nextTime) {
                     that.scrollToLrc(i);
                     return;
                 }
             }
         },
         300);
     },
     //暂停
     pause: function() {
         this.stop = true;
         clearInterval(this.t);
     },
     //格式化时间
     formatTimeStamp: function(timestamp) {
         var re = /([0-9]+):([0-9]+)\.([0-9]+)/i,
         seconds = timestamp.replace(re,
         function(a, b, c, d) {
             return Number(b * 60) + Number(c) + parseFloat('0.' + d);
         });
         return seconds;
     },
     //歌词滚动
     scrollToLrc: function(idx) {
         var ds = getOffset(this.li[idx]).top,
         i,
         len;
         //如果歌词索引没有变动，则认为这句没有唱完，不处理
         if (this.idx === idx) return;
         //否则更新索引值并更新样式和位置
         this.idx = idx;
         for (i = 0, len = this.li.length; i < len; i++) {
             this.li[i].className = '';
         }
         this.li[idx].className = 'cur';
         this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
     }
 };

 function $(id) {
     return typeof id === 'string' ? document.getElementById(id) : id;
 }
 function cEl(el) {
     return document.createElement(el);
 }
 function trim(str) {
     return str.replace(/(^\s*)|(\s*$)/g, "");
 }
 function isEmptyObj(o) {
     for (var p in o) return false;
     return true;
 }
 function getOffset(el) {
     var parent = el.offsetParent,
     left = el.offsetLeft,
     top = el.offsetTop;

     while (parent !== null) {
         left += parent.offsetLeft;
         top += parent.offsetTop;
         parent = parent.offsetParent;
     }

     return {
         left: left,
         top: top
     };
 }

 var p = new musicPlayer({
     player: $('player'),
     lrc: $('lrc').innerHTML,
     lrcArea: $('lrcArea')
 });