先给大家看下效果：
实现功能：音乐播放，歌词跟随进度滚动，中间随着音乐播放图片360度旋转
文件目录：
做一个播放器，音乐和歌词事先要下载好，搜一些自己喜欢的封面，让图片360度旋转的样式，通过按钮增删样式达到跟音乐同步进行：
.img{animation: img 18s linear infinite;-moz-animation: img 18s linear infinite;-webkit-animation: img 18s linear infinite;-o-animation: img 18s linear infinite;animation-play-state:paused;}.running{animation-play-state:running;}.stop{animation-play-state:paused;}
// 播放play.onclick = function(){if(audio.paused){audio.play();document.getElementById("musicImg").classList.remove("stop");document.getElementById("musicImg").classList.add("running");}}// 暂停pause.onclick = function(){if(audio.played){audio.pause();document.getElementById("musicImg").classList.remove("running");document.getElementById("musicImg").classList.add("stop");}}
其中歌词匹配才是让我头疼的，所有JS代码部分：
<script type="text/javascript">var play = document.getElementById('play'),pause = document.getElementById('pause'),prev = document.getElementById('prev'),next = document.getElementById('next'),musicName = document.getElementById('musicName'),musicImg = document.getElementById('musicImg'),bgImage = document.getElementById('music');/*var lrc = document.getElementById("lrc_content").innerHTML;*///添加歌词var lrc="";var lrcName = new Array();var lrcName1;lrcName = ['你听得到','爱在西元前'];var music = new Array();music = ['周杰伦-你听得到','周杰伦-爱在西元前'];var len = music.length;var num = 0;lrcName1 = lrcName[num];var oLRC = {ti: "", //歌曲名ar: "", //演唱者al: "", //专辑名by: "", //歌词制作人offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置ms: [] //歌词数组{t:时间,c:歌词}};var lineNo=0//当前行var C_pos= 6//C位var offset= -20//滚动距离（应等于行高）var audio = document.getElementById("audio");//播放器var ul = document.getElementById("lyric"); //歌词容器列表getLRC(lrcName1);//高亮显示歌词当前行及文字滚动控制，行号为lineNofunction lineHigh() {var lis = ul.getElementsByTagName("li");//歌词数组if(lineNo>0){lis[lineNo-1].removeAttribute("class");//去掉上一行的高亮样式}lis[lineNo].className = "lineHigh";//高亮显示当前行//文字滚动if(lineNo>C_pos){ul.style.transform = "translateY("+(lineNo-C_pos)*offset+"px)"; //整体向上滚动一行高度}}//滚回到开头，用于播放结束时function goback() {document.querySelector("#lyric .lineHigh").removeAttribute("class");ul.style.transform = "translateY(0)";lineNo = 0;}//监听播放器的timeupdate事件，实现文字与音频播放同步audio.ontimeupdate = function () {if(lineNo==oLRC.ms.length)return;var curTime = audio.currentTime; //播放器时间if(parseFloat(oLRC.ms[lineNo].t)<=curTime){lineHigh();//高亮当前行lineNo++;}};//监听播放器的ended事件，播放结束时回滚歌词/*audio.onended = function () {goback();};*/function getLRC(lrcName) {lrc = "";var ajax = new XMLHttpRequest();ajax.open("get", "lrc/"+lrcName +".lrc",true);ajax.send(null);ajax.onreadystatechange = function () {if (ajax.readyState == 4 && ajax.status == 200) {lrc = ajax.responseText;createLrcObj(lrc);//console.log(lrc);}};}function createLrcObj(lrc) {if(lrc.length==0) return;var lrcs = lrc.split('\n');//用回车拆分成数组for(var i in lrcs) {//遍历歌词数组lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容var s = t.split(":");//分离:前后文字if(isNaN(parseInt(s[0]))) { //不是数值for (var i in oLRC) {if (i != "ms" && i == s[0].toLowerCase()) {oLRC[i] = s[1];}}}else { //是数值var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个var start = 0;for(var k in arr){start += arr[k].length; //计算歌词位置}var content = lrcs[i].substring(start);//获取歌词内容for (var k in arr){var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容var s = t.split(":");//分离:前后文字oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),c: content});}}}oLRC.ms.sort(function (a, b) {//按时间顺序排序return a.t-b.t;});showLRC();}function showLRC() {var s="";for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表s+='<li>'+oLRC.ms[i].c+'</li>';}document.getElementById("lyric").innerHTML = s;}// 播放play.onclick = function(){if(audio.paused){audio.play();document.getElementById("musicImg").classList.remove("stop");document.getElementById("musicImg").classList.add("running");}}function hasClass(element,className){var aSameClassEle = document.getElementsByClassName(className);for (var i = 0;i < aSameClassEle .length;i++){if(aSameClassEle[i] === element){return true;}}}// 暂停pause.onclick = function(){if(audio.played){audio.pause();document.getElementById("musicImg").classList.remove("running");document.getElementById("musicImg").classList.add("stop");}}// 上一首prev.onclick = function(){num = (num + len - 1) % len;audio.src = './music/' + music[num] + '.mp3';lrcName1 = lrcName[num];lineNo = 0;oLRC.ms = [];getLRC(lrcName1);musicName.innerHTML = music[num];bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';musicImg.src = './image/' + music[num] + '.jpg';play.onclick();}// 下一首next.onclick = function(){num = (num + 1) % len;audio.src = './music/' + music[num] + '.mp3';lrcName1 = lrcName[num];lineNo = 0;oLRC.ms = [];getLRC(lrcName1);musicName.innerHTML = music[num];bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';musicImg.src = './image/' + music[num] + '.jpg';play.onclick();}// 自动切换下一首audio.addEventListener('ended',function(){goback();next.onclick();},false);</script>
需要所有源码，可以去github上自行下载：
/lzs1996/MusicPlayer.git
