<div style="z-index: 127;width: 1000px; height: 600px; margin-top:15px; margin-left:15px;  box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 5px 15px #000079; overflow: hidden;transform:  rotate(0deg);background-size: 100% 100%;background-image: url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif); text-align: center;">
<div class="container">

      <audio autoplay="" class="audio" id="MusicPlayer" src="https://link.hhtjim.com/kw/219797522.mp3"  loop ></audio>
      <div class="btn">
        
      </div>
<div class="img_border" id="aplay"style="width: 1000px; height: 600px;  position: absolute;top:-500px; left:0px;"><img class="img_border" src="http://pan.yinhuabbs.cn/view.php/4986bb39b5c83b9766824e8ba7ce182e.jpg" style="width: 700px; height: 600px;  position: absolute;top:10px; left:-120px;-webkit-mask-image:radial-gradient(black 25% ,transparent 70%);z-index: 100;">
     <div class="items" style="text-align:center;position:absolute;top:0px;left:0px;z-index: 200;"> 
<div  class="lrc">
        <ul id="ullrc">
         </ul>
      </div></div>
 </div>

<div class="items" style="margin-top:-420px; margin-left:430px;z-index: 200;">
<span  style="color:#fff000;width:780px;height:50px;"><span style="font-family:华文隶书;"><span style="font-size:35px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px  0);">《谁是那个爱我的人》</br>李英</span></span></span>
</div>

 </div>
<style type="text/css">

.container{
    width: 960px;position: absolute;top:500px; left:0px;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:60px; left:80px;
}
.container .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:450px; left:80px;
    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: 80px;
    line-height: 60px;
font-family:汉标精工粗犷体;
    font-size: 25px;
    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;

}
/*动态歌词样式*/
.container .lrc #ullrc li.active{ 
    font-size: 35px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:-500px; left:00px;transform: scale(1, 1)}
.container .img_border #aplay{border:2px solid #000000;border-radius:0%; }
.container .z360z{animation: rotating 40s linear infinite ;background-size:100% 100%;background-image: url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031214064819863612.gi), url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif), url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213340050925017.gi), url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gi),url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif);}@keyframes rotating{from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}to {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}}
}

.audio{
    z-index: 0;
    bottom: 0;
    opacity: 0;
 transition: all 2s;
width: 1px; 
height: 1px;
box-shadow:  0px 0px 0px 2px #000000;
border-radius:25%;position: absolute;top:480px; left:220px;
}
.audio:hover{
    opacity: 0;
}
</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.000]《谁是那个爱我的人》李英
[00:12.134]词/曲：春妹
[00:23.134]LRC歌词制作：焱鑫磊
[00:25.134]每当夜色悄悄降临
[00:30.694]心中的痛多了几分
[00:36.183]带着疲备独自伤神
[00:41.839]多想有个陪我的人
[00:47.420]几多心酸几多浮沉
[00:52.927]岁月刻下累累伤痕
[00:58.467]相爱的人没有缘分
[01:04.091]心中的苦独自去吞
[01:09.770]谁是那个爱我的人
[01:15.323]谁能给我一点温存
[01:20.882]收留那颗飘泊的心
[01:26.493]给我一份想要的安稳
[01:32.008]谁是那个爱我的人
[01:37.656]别再错过今生缘分
[01:43.247]我准备好一颗真心
[01:48.785]茫茫人海只为你转身
[02:16.638]几多心酸几多浮沉
[02:22.190]岁月刻下累累伤痕
[02:27.842]相爱的人没有缘分
[02:33.442]心中的苦独自去吞
[02:39.036]谁是那个爱我的人
[02:44.639]谁能给我一点温存
[02:50.230]收留那颗飘泊的心
[02:55.680]给我一份想要的安稳
[03:01.227]谁是那个爱我的人
[03:06.898]别再错过今生缘分
[03:12.441]我准备好一颗真心
[03:18.051]茫茫人海只为你转身
[03:23.658]谁是那个爱我的人
[03:29.111]别再错过今生缘分
[03:34.748]我准备好一颗真心
[03:40.369]茫茫人海只为你转身
[03:45.886]茫茫人海只为你转身
[04:05.000]谢谢欣赏！
[04:19.000]`;
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 rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="暂停";
        }

        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="播放";
                }
            }
        }
    </script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric[i][0]){ document.getElementById("ullrc").innerHTML = lyric[i][1]; if(i+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();</script>