·<meta charset="UTF-8">
<style>
#papa  { margin: 10px 0 10px calc(0px);
	width: 1252px;
	height: 679px;
	background:#000 url(https://wj1.zp68.com:812/lxx/yunhua/20211226/03.jpg)no-repeat center/cover; box-shadow: 2px 2px 6px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;  }
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:50px; left:1040px;width: 32px; height: 32px;z-index:4;mix-blend-mode:lighten;  }
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;  }
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
	position: absolute;
	top:84%; left:78.7%;
	bottom: 5px;
	width: 30px;
	height: 30px;
	border: 0px solid #cccccc;
	border-radius: 0%;
	opacity: 1;
	transition: .7s;
	display: grid;
	place-items: center;
	--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
	position: absolute;
	content: '';
	border-style: solid;
	border-color: #ccc;
	cursor: pointer;
	transition: .4s;
}
#mplayer::before {
	width: 0;
	height: 0;
	left: 48px;
	border-width: 3.5px 3.5px;
	border-color: transparent transparent transparent #ccc;
	opacity: var(--disp1);
}
#mplayer::after {
	width: 1px;
	height: 5px;
                left: 22.5px;
	border-width: 0 2px 0 2px;
	opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
        font: bold 12px/16px '微软雅黑',serif;
        color: #ccc;
         top:80%;
        left:78%;}

#prog {position: absolute;z-index: 91;
        width: 11.0%;
        height: 0.5%;
        cursor: pointer;
         top:83.5%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:77.8%;
border-radius: 2px;}


#wzsd1 { animation: wzsd 0.56s linear infinite ;} 
@keyframes wzsd { 
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%);}}
#bt{ --w: 28%; width: var(--w); overflow: hidden; color: #ccc; position: absolute; left:62%;top:190%;  font-size: 14px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {  50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt"> 昨夜星辰 歌手：歌手：高胜美</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://wj1.zp68.com:812/lxx/yunhua/20211226/03.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<div  id="prog"></div> 
<div id="mplayer"></div>
<div  class="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
        </div>      
 </div>
</div>
<audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20211226/06.mp3" loop autoplay></audio>

<style type="text/css">
 .lrc{z-index: 20;
    width: 100%;
    height: 120px;
    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:9%; left:5%;z-index: 5;
    margin: 0 auto;}
 .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
 .lrc #ullrc li{
    height: 70px;
    line-height: 60px;
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;}
/*动态歌词样式*/
 .lrc #ullrc li.active{ 
    font-size: 40px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc =`[00:00.000] 昨夜星辰  歌手：高胜美
[00:06.00]曲：童真知子 
[00:12.00]词：枫颂
[00:17.18]昨夜的 昨夜的星辰已坠落
[00:27.53]消失在 遥远的银河
[00:36.22]想记起 偏又已忘记
[00:43.62]那份爱 换来的是寂寞
[00:52.68]爱是不变的星辰
[00:57.12]爱是永恒的星辰
[01:01.55]绝不会在银河中坠落
[01:10.24]常忆着那份情那份爱
[01:18.93]今夜星辰今夜星辰
[01:21.89]依然闪烁
[01:27.00]
[01:33.00]
[01:39.00]
[01:44.20]今夜的 今夜的星辰依然闪烁
[01:54.43]像眼神 点燃爱的火
[02:03.12]想得到 偏又怕失去
[02:10.52]那份爱 深深埋在心窝
[02:19.76]爱是不变的星辰
[02:24.20]爱是永恒的星辰
[02:28.64]绝不会在银河中坠落
[02:37.14]常忆着那份情那份爱
[02:46.02]今夜星辰今夜星辰
[02:48.97]依然闪烁
[03:01.97]谢谢欣赏
[03:11.07]
`;
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 = 60;
    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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}
$("aud").ontimeupdate = setPosition;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

 prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
        }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #FFF, #FFF, #FFF ' + aud.currentTime / aud.duration * 100 + '%, #999999 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

        });
 let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
        };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
        if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';  image1.style.opacity = '';
        }
        if (this.storeUrl) {
            this.src = this.storeUrl;   
        }
    };
    HTMLImageElement.prototype.stop = function() {
        var canvas = document.createElement('canvas');
        // 尺寸
        var width = this.width, height = this.height;
        if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
        }
    };
}
var image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>