|
|
发表于 2024-12-6 04:25:18
|
显示全部楼层
IP:山东
<br /><br /><div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-300px;MARGIN-top:86px;">
<style type="text/css">
#papa { margin: 10px 0 20px calc(50% - 680px); background:#800 url(https://pic.imgdb.cn/item/6741e221d29ded1a8c23b434.jpg)no-repeat center/cover;width: 1286px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mplayer {z-index: 80;
position: absolute;
left:8px;
bottom: 37px;
width: 30px;
height: 30px;
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: #eeeeee;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 18px;bottom: -12px;
border-width: 12px 15px;
border-color: transparent transparent transparent #eeeeee;
opacity: var(--disp1);
}
#mplayer::after {
width: 4px;
height: 20px;bottom: -10px;
left: 15px;
border-width: 0 6px 0 6px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 8;
font: normal 12px sans-serif;
color: #ffffff;
bottom: 28px;
left:91%;}
#prog {position: absolute;z-index: 8;
width: 86%;
height: 2px;background:#ccc;
cursor: pointer;
bottom: 35px;
left:4%;
border-radius: 1px;}
#prog-bar {
height: 100%;
background: #FF0000;
width: 100%;
}
#musickrc{width:100%;line-height:35px;position: absolute;position: absolute;color:#000080;left:0%;top:85%;z-index: 11;}
#musickrc span {display:block; text-align:center; }
#musickrc01{ text-align:center;font-size: 42px;font-family:华文隶书;color:#880078;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);}
#musickrc02{ text-align:right;font-size: 0px;font-family:华文隶书;color:#ffffff;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);}
</style>
<div id="papa">
<div id="mplayer"></div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="musickrc">
<P id="musickrc01"></P>
<P id="musickrc02"></P>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/8d/bd/2b/469f87fed5a0bc1a2816905294741577/audio.mp3" autoplay loop></audio>
<script>
(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;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
var percent= (aud.currentTime / aud.duration) * 100;
progBar.style.width = percent + '%';
});
aud.addEventListener('timeupdate', () => {
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;
};
/*结束*/
</script>
<script >
var songkrc =`[00:01.99]遇见爱 - 陶钰玉
[00:10.99]作词：玉镯儿
[00:15.06]作曲：余恒锋
[00:20.87]小小的一阵风吹过小山丘
[00:25.93]吹散孤单和忧愁
[00:30.94]时光中等候人海里漂流
[00:35.88]来到缘分的路口
[00:40.98]小小的一条河唱着小情歌
[00:46.09]星星落在我眼眸
[00:51.09]最好的青春和最好的你
[00:56.17]是最幸运的拥有
[01:01.24]嗨遇见爱遇见爱情的时候
[01:06.41]轻轻牵起你的手
[01:11.22]天涯或海角路程再遥远
[01:16.30]我会陪在你左右
[01:21.54]嗨遇见爱遇见爱情的时候
[01:26.55]紧紧牵着你的手
[01:31.53]把风景看透把爱酿成酒
[01:36.64]走到时间的尽头
[02:01.89]小小的一条河唱着小情歌
[02:06.94]星星落在我眼眸
[02:12.05]最好的青春和最好的你
[02:16.98]是最幸运的拥有
[02:22.10]嗨遇见爱遇见爱情的时候
[02:27.23]轻轻牵起你的手
[02:32.20]天涯或海角路程再遥远
[02:37.30]我会陪在你左右
[02:42.32]嗨遇见爱遇见爱情的时候
[02:47.41]紧紧牵着你的手
[02:52.56]把风景看透把爱酿成酒
[02:57.38]走到时间的尽头
[03:02.62]嗨遇见爱遇见爱情的时候
[03:07.54]轻轻牵起你的手
[03:12.44]天涯或海角路程再遥远
[03:17.68]我会陪在你左右
[03:22.70]嗨遇见爱遇见爱情的时候
[03:27.76]紧紧牵着你的手
[03:32.82]把风景看透把爱酿成酒
[03:38.05]走到时间的尽头
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines[0])) {lines = lines.slice(1); }; lines[lines.length - 1].length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push([parseInt(t[0],10) * 60 + parseFloat(t[1]), value]); }); }); result.sort(function(a, b){ return a[0] - b[0];}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var j= 0; j < lyric.length; j++) { if(this.currentTime > lyric[j][0]){ document.getElementById("musickrc01").innerHTML = lyric[j][1]; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML = lyric[j + 1][0]; }else{ document.getElementById("musickrc02").innerHTML = lyric[j + 1][1];};};};};
</script > |
|
发表于 2024-12-4 07:30:07