<div style="z-index: 127;width: 1000px; height: 600px; margin-top:12px; margin-left:12px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 5px 12px #5B00AE; overflow: 
hidden;transform:  rotate(0deg);background: url(http://bbs.cnzv.cc/pan/qun91530683/2022/07/24/3a3866dd0ac86640bf8a6a3cde1b1bae.gif)0 0/100%  100%; text-align: center;">

<div class="img_border"><img src="http://yzf0319.com/2022/3yue/txtp/5656.gif" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></div>

<div style="position: absolute; width: 513px; height: 110px; z-index: 2; left: 610px; top: 10px" id="layer3">
	<p align="center"><strong><font face="宋体" size="5" face="焱鑫磊" color="#FFD306">《总以为来日方长》</font></strong>
	<p align="center"><strong><font face="行楷" size="2" color="#00CACA"> 音画制作：焱鑫磊</font></strong></div>

<div style="left: 25px; position: absolute; top: 540px"><img src="http://pic.yupoo.com/yzf000319/336795e8/b78b9801.gif" id="aplay"style="width: 90; height: 35;z-index: 550;" ></div>

    
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://link.hhtjim.com/kw/215622571.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      
<div class="img_border" id="aplay"></div>
     <div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;"> 
<div  class="lrc">
        <ul id="ullrc">
         </ul>
 </div></div></div>
 </div>
 
<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:525px; left:-20px;z-index: 100;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;z-index: 1;
    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:-10px; left:50px;
    margin: 0 auto;}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{ 
    font-size: 30px;
    color: #ff0000;
    font-weight: bold}
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {0%{
        background-position: 0% 0;transform:translate(0%,10%)scale(1.2);
    }
    100%{
        background-position: -600% -600%;filter:hue-rotate(360deg);transform:translate(0%,-10%)scale(1);
    }
}
</style>

<style type="text/css">.items  { z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc = `[00:00.00]《总以为来日方长》梅朵
[00:07.47]词：张凤敏  曲：王佳瑜
[00:14.48]LRC歌词制作：焱鑫磊
[00:21.48]可有微弱烛光引渡到过往
[00:25.04]当时你的模样肆意流淌
[00:28.96]我站在风中回望只有荒凉
[00:32.92]一个人等不到天亮
[00:37.17]原来大梦一场还以为开场
[00:40.76]可下一秒温度不能同上
[00:44.82]被吹到什么方向尚且迷茫
[00:48.64]两个人怎么说久长
[00:52.92]我们不慌不忙总以为来日方长
[00:56.53]我们等待花开却忘了世事无常
[01:00.84]手心的滚烫后来一点点变凉
[01:04.44]那些忙那些谎我体谅
[01:08.31]我们不慌不忙总以为来日方长
[01:12.28]我们憧憬瞻望却难敌世事无常
[01:16.77]眼底的光芒后来一层层消亡
[01:20.35]这时光太会忘我投降
[01:48.07]原来大梦一场还以为开场
[01:51.59]可下一秒温度不能同上
[01:55.57]被吹到什么方向尚且迷茫
[01:59.54]两个人怎么说久长
[02:03.70]我们不慌不忙总以为来日方长
[02:07.33]我们等待花开却忘了世事无常
[02:11.65]手心的滚烫后来一点点变凉
[02:15.27]那些忙那些谎我体谅
[02:19.06]我们不慌不忙总以为来日方长
[02:23.07]我们憧憬瞻望却难敌世事无常
[02:27.41]眼底的光芒后来一层层消亡
[02:31.14]这时光太会忘我投降
[02:39.27]我们不慌不忙总以为来日方长
[02:42.77]我们等待花开却忘了世事无常
[02:46.95]手心的滚烫后来一点点变凉
[02:50.69]那些忙那些谎我体谅
[02:54.65]我们不慌不忙总以为来日方长
[02:58.47]我们憧憬瞻望却难敌世事无常
[03:02.95]眼底的光芒后来一层层消亡
[03:06.39]这时光太会忘我投降
[03:11.96]谢谢欣赏！
[03:36.96]`;
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 = 70, lrc_ul_height = 50;
    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>