花潮MP3带歌词播放器
本帖最后由 亚伦影音工作室 于 2026-7-4 20:22 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#bj {position:relative; top: 50px;overflow:hidden; width:620px; height: 200px;border:2px solid #ccc; background-color:#800100;left:40px; --state: running;}
#tp{position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;}
#bnt{margin: 10px 30px ;width: 120px;height: 40px;position: absolute; cursor: pointer;}
#ptxt{width:100%;height:6px;font:400 18px/0px "STKaiti";color: #fff;line-height:0px;bottom: 160px;left:550px;position: absolute;}
#wrapper {
position:absolute; left:50px; bottom:30px;
font:300 30px/0px "Ma Shan Zheng","STKaiti";
letter-spacing:4px;
color:#ff0000;
white-space:pre;
width:520px; height: 50px; text-align:center;
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);
z-index:2;
}
.char {
display: inline-block;
padding: 0px 2px;
opacity: 0;
transform: translate(var(--x), var(--y))rotate(270deg) ;
animation: fadeIn 1.5s var(--delay) forwards,flas 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(0, 0%);
opacity: 1;
}
}
@keyframes flas {
100% {filter: hue-rotate(360deg);}
}
</style>
<div id="bj" >
<img id="tp"src = "https://pic1.imgdb.cn/item/69b4fee50ee6511f188aa107.gif">
<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">0%</div>
<div id="wrapper" >MP3带歌词播放器</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3376614283.MP3" autoplay loop ></audio>
</div>
<script>
const gc = `不删不聊不联系-沧桑小杰
作词：广羽人彡
作曲：舟木楼
演唱：沧桑小杰
编辑制作：亚伦
曾经爱到了 骨子里的人
如今变成了 我心底的针
我回不了头 也转不过身
心头早已经 只剩下伤痕
曾经对彼此 最熟悉的人
如今却变得 这样的陌生
你来过一阵 我疼了一生
若是能重来 我不会沉沦
后来不删不聊不联系
可我不得不能不想你
无论走到哪里我的心
还是会继续对你惦记
也许我会被别人代替
可我却还是无能为力
从今往后离开我的你
也一定要记得好好 照顾自己
曾经对彼此 最熟悉的人
如今却变得 这样的陌生
你来过一阵 我疼了一生
若是能重来 我不会沉沦
后来不删不聊不联系
可我不得不能不想你
无论走到哪里我的心
还是会继续对你惦记
也许我会被别人代替
可我却还是无能为力
从今往后离开我的你
也一定要记得好好 照顾自己`;
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 ? 0 : 0);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).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);
}
bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png",tp.src = "https://pic1.imgdb.cn/item/69b4fee50ee6511f188aa107.gif") : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png",tp.src = "https://pic1.imgdb.cn/item/6a485ec61f8fda9783e197d8.jpg");
mState = () => bj.style.setProperty('--state',aud.paused ? (reflect.pauseAnimations(),'paused') : (reflect.unpauseAnimations(),'running'));
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
//保留2位小数
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
</script>
欣赏精彩制作，问好亚伦朋友。 很漂亮的花潮专用播放器，这个太赞了。
欣赏亚伦老师好帖{:4_199:} 好看 好听，欣赏学习了{:4_204:}
页:
[1]