尔滨的雪（歌词同步）
<div style="position: absolute; left:0px;width:100%;margin-top:150px;">
<style>
#bj {position:relative; overflow:hidden; width:1280px; height: 680px; overflow:hidden; border:2px solid #ccc; background-color:#ffffff; }
#vid {width:1280px; height: 680px; opacity:1; object-fit:cover; border:0px solid #000; }
#wrapper {position:relative; font:bold 50px/60px sans-serif; text-shadow:1px 1px 1px gray; letter-spacing:4px; color:skyblue; white-space:pre; -webkit-background-clip:text; filter:drop-shadow(#FFFFFF 2px 0 0) drop-shadow(#FFFFFF 0 2px 0) drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0); width:860px; height: 70px; text-align:center; margin-top:-90px;margin-left:10px; border: 0px solid #000; }
</style>
<div id="bj">
<video id="vid" autoplay="autoplay" loop="loop" src="https://cccimg.com/view.php/c1659edb6cc496a1850954ced1b4a4b0.mp4">
</div>
<div id="wrapper">MP3带歌词播放器</div><br><br>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2642564499.mp3" autoplay loop ></audio>
</div>
<div style="height:105px;"></div>
<script>
const gc = ` 武朝歌欢迎您\n《尔滨的雪》\n 演唱： 赵滏城\n 词曲 : 赵滏城\n一路雪花 相拥来\n有微笑 天地开\n暖暖的阳光 多可爱\n把世界 牵起来\n你我同在 这梦里\n呼吸也甜蜜\n每一个冬天 都想起\n尔滨和你 在一起\n\nThere is a snowflake flying by.\n（有片雪花飘舞而来）\nNow we can see you smile.\n（我们望见你的微笑）\nDream of winter, You and I.\n（冰雪同梦 亚洲同心）\nLove among Asia.\n（有我有你）\n你我同圆 这颗心\n精彩挽深情\n每一个冬天 都想起\n尔滨和你 在一起\n一路雪花 相拥来\n有微笑 天地开\n暖暖的阳光 多可爱\n把世界 牵起来\n同梦同心 在这里\n飞雪舞千重\n每一个心灵 都铭记\n这冰雪 多美丽\n这冰雪 多美丽\n"},"code":200} `;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<div style="height:760px;">
页:
[1]