<style>
 #papa { margin: 120 0 0 calc(50% - 600px);   left: 0px;width: 1200px; height: 750px;top:-110px; background: gray url('http://pan.yinhuabbs.cn/view.php/2f6da87b1a2d83861b4506cb7e19a296.jpg') no-repeat center/cover; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#mplayer { position: absolute; width: 100%; height: 160px; bottom: 0; display: flex; justify-content: center; align-items: flex-end; }
.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 10px; background: gray linear-gradient(to top,darkgreen,green,lightgreen); transition: height .45s; }
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -44px; }
.tit { position: absolute; left: 80px; top: 50px; font: bold 2em sans-serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>

<div id="papa">
        <div class="tit">《走心的情歌》崔伟立 孙艺琪 </div>
        <div id="mplayer"></div>
        <audio id="aud" src="http://link.hhtjim.com/kw/148168284.mp3" loop autoplay></audio>
</div>

<script>
(function() {
      ypData = [0,0,19,0,10,17,48,28,140,179,164,188,176,182,157,182,186,198,197,186,172,176,189,184,176,191,193,222,188,203,202,217,216,179,186,199,184,186,198,169,190,202,182,190,168,195,185,193,183,153,187,158,179,186,178,179,193,165,167,193,160,194,217,193,198,204,200,197,184,199,182,163,175,196,191,194,190,164,171,170,195,180,158,181,170,181,175,167,176,201,196,207,167,187,186,206,193,163,196,179,182,180,189,183,192,191,223,191,211,178,209,181,210,206,194,208,173,216,195,188,175,221,202,198,197,206,216,194,179,178,200,202,201,182,182,171,230,218,199,224,189,204,187,183,175,185,171,173,180,176,193,173,198,180,180,183,203,175,151,198,177,166,190,201,178,185,191,218,190,199,176,188,196,189,201,190,214,179,191,184,165,173,166,176,213,193,185,208,169,206,186,198,188,206,185,180,195,193,217,200,225,199,199,185,211,185,209,188,203,199,203,209,171,220,186,213,188,199,198,207,202,200,210,196,218,175,207,186,154,175,193,184,164,198,161,184,169,173,182,220,175,180,177,159,188,176,189,182,185,171,198,189,163,175,158,201,179,204,183,150,165,187,196,198,201,175,182,198,193,189,200,192,209,179,195,189,183,181,178,195,217,201,188,193,186,209,193,193,178,178,187,192,200,191,219,182,208,177,202,188,184,168,169,174,157,170,176,197,158,174,186,199,176,205,188,176,187,167,204,175,189,173,179,196,172,192,201,175,167,210,180,190,179,215,183,211,193,182,183,206,202,188,186,168,190,172,214,195,163,192,216,199,169,208,187,205,188,215,197,170,175,159,179,192,201,189,200,185,177,177,196,193,178,176,183,187,167,189,170,211,163,179,181,189,184,181,177,162,191,195,185,207,231,182,200,187,212,184,178,179,194,190,189,227,176,215,188,183,178,153,177,193,195,201,201,197,219,191,207,189,185,186,181,188,168,190,183,208,190,221,188,201,196,210,197,217,198,182,199,201,189,186,225,204,192,178,149,194,169,217,176,189,163,154,180,162,172,142,158,164,179,159,170,185,149,181,216,188,189,189,174,187,169,197,178,184,159,158,186,171,185,213,189,194,197,205,223,203,241,199,215,183,206,192,201,182,187,199,209,228,177,202,184,202,175,184,193,224,209,204,198,195,201,179,176,200,189,183,194,170,193,197,187,169,168,174,182,199,171,162,158,159,175,174,221,189,183,169,181,193,194,182,166,183,165,171,181,179,172,202,195,198,167,192,187,186,181,172,197,200,201,172,221,188,215,186,219,200,184,184,199,215,173,182,183,187,202,217,192,218,214,222,220,202,226,187,168,178,170,188,201,192,183,212,198,186,164,204,187,185,172,185,180,156,179,154,181,182,184,163,183,183,163,175,173,173,154,203,167,208,164,158,184,181,181,178,186,169,198,201,202,173,178,169,201,186,219,194,200,198,192,200,188,184,181,199,187,173,184,198,186,175,176,188,186,204,229,176,217,196,181,191,211,193,176,172,177,178,182,194,193,192,191,149,172,176,187,164,193,178,213,167,211,179,200,191,215,205,191,174,167,171,154,179,188,188,184,181,181,190,201,186,185,183,201,168,182,202,225,191,190,194,203,199,200,208,188,202,179,218,179,186,184,174,198,193,196,174,226,197,212,193,207,191,174,183,161,214,193,181,180,208,190,189,185,162,196,172,182,180,200,172,170,166,159,181,187,184,158,158,163,205,174,183,186,206,191,199,174,178,173,190,201,179,199,176,197,187,197,187,182,179,155,162,163,181,198,213,157,183,194,209,196,207,190,180,194,206,204,193,198,164,193,196,199,186,192,202,218,209,201,210,184,199,184,177,187,182,194,194,194,161,191,184,164,167,214,187,137,131,129,124,122,109,110,114,98,122,115,92,109,115];
        let total = Math.ceil(mplayer.offsetWidth / 6);
        let cNum = 0;
        for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                el.style.height = Math.floor(Math.random()* 100) + 'px';
                mplayer.appendChild(el);
        }
        let lines = document.querySelectorAll('.mLine');

        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
       
        aud.addEventListener('timeupdate', () => {
                cNum ++;
                if(cNum >= ypData.length) cNum = 0;
                setPinpu(cNum);
        });

        function setPinpu(num) {
                let data = ypData[num];
                for(j=0; j<total; j++) {
                        lines[j].style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
                }
        }

})();
</script>

<audio autoplay=""  id="MusicPlayer"  src="http://link.hhtjim.com/kw/148168284.mp3" loop="" ></audio>

<div class="lrc">
<ul id="ullrc">
         </ul>
      </div>
</div>
</div>  


<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left: 20px;
}
.lrc{
    width: 870px;
    height: 140px;
    overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px  0);
    display: block;position: absolute;top:125px; left:200px;z-index: 30;
    margin: 0 auto; 
}
 .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;-webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-color: red;
     background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
     background-repeat:no-repeat;
     background-position: -850px 0;
     -webkit-animation:loop 3s linear infinite;

}
/*动态歌词样式*/
.lrc #ullrc li.active{ 
    font-size: 40px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

@-webkit-keyframes loop{
     0%{background-position: -800px 0;}
     100%{background-position: -0 0;}
}

/*mv动画*/
.img_border{margin: -220px auto;position: absolute;top:0px; left:0px;z-index:10;
    display: block;
    width: 1024px; height: 1024px;animation:rotating 10s linear infinite;}
.img_border #aplay{ }

@keyframes rotating  {0%{
        background-position: 0% 0%;filter:hue-rotate(360deg);transform:  rotate(0deg)scale(1.2);
    }
    100%{
        background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(360deg)scale(1.2);
    }
}

</style>

<script>var lrc =`[00:00.000]《走心的情歌》崔伟立 孙艺琪
[00:07.000]词/曲：崔伟立
[00:13.005]LRC歌词制作：焱鑫磊
[00:20.029]花开的时候
[00:22.202]美丽的颜色
[00:24.333]回过头你就在我
[00:26.096]身边经过
[00:28.806]灿烂的容颜
[00:30.909]温柔的眼波
[00:33.080]多想能一生一世
[00:34.968]有你陪着
[00:37.471]叶落的时候
[00:39.615]你却离开我
[00:41.713]只留下满眼荒芜
[00:43.552]一地萧瑟
[00:46.141]落单的蝴蝶
[00:48.331]枯萎的花朵
[00:50.516]伴着那无尽悲伤
[00:52.387]泪流成河
[00:56.074]走心的情歌
[00:58.127]不停的唱着
[01:00.341]不停地重播
[01:02.468]不停的啰嗦
[01:04.720]想念的人啊
[01:06.831]你现在哪里
[01:08.956]你现在过得到底
[01:10.804]快不快乐
[01:13.416]走心的情歌
[01:15.557]有人在哭着
[01:17.747]有人在笑着
[01:19.953]有人却沉默
[01:22.129]年华被蹉跎
[01:24.408]思念已斑驳
[01:26.575]我就在当初遇见
[01:28.502]你的角落
[01:30.515]把你等着
[01:53.793]花开的时候
[01:56.126]美丽的颜色
[01:58.249]回过头你就在我
[02:00.070]身边经过
[02:02.620]灿烂的容颜
[02:04.755]温柔的眼波
[02:07.058]多想能一生一世
[02:08.918]有你陪着
[02:11.362]叶落的时候
[02:13.511]你却离开我
[02:15.626]只留下满眼荒芜
[02:17.637]一地萧瑟
[02:20.164]落单的蝴蝶
[02:22.267]枯萎的花朵
[02:24.341]伴着那无尽悲伤
[02:26.178]泪流成河
[02:30.013]走心的情歌
[02:32.060]不停的唱着
[02:34.195]不停地重播
[02:36.451]不停的啰嗦
[02:38.683]想念的人啊
[02:40.730]你现在哪里
[02:42.887]你现在过得到底
[02:44.970]快不快乐
[02:47.386]走心的情歌
[02:49.504]有人在哭着
[02:51.705]有人在笑着
[02:53.857]有人却沉默
[02:56.034]年华被蹉跎
[02:58.164]思念已斑驳
[03:00.426]我就在当初遇见
[03:02.377]你的角落
[03:04.269]把你等着
[03:30.269]
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        var twoParts = content.split("]");
        var time = twoParts[0].substr(1);
        var timeParts = time.split(":");
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        var words = twoParts[1];
        return{
            seconds: seconds,
            words: words,
        };
    } 
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
        var li = document.createElement("li");
        li.innerText = lrcArray[index].words;
        $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
        return;
    }
    var lrc_li_height = 80, lrc_ul_height = 70;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
        top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
        activeLi.classList.remove("active");
    }
    $("ullrc").children[index].classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
         function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                    audio.play(); //audio.play();
                    bf.innerText="";
                } else {
                    audio.pause(); 
                    bf.innerText="";
                }
            }
        }
var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    

var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="img_border";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); 
</script>