最简单的播放器按钮[花潮论坛]
本帖最后由 亚伦影音工作室 于 2026-6-13 19:06 编辑 <br /><br /><style>#pic{margin: 40px 30px ;width: 200px;height: 170px; background: #00aa00; border-radius: 1%; box-shadow:0px 0px 0px 2px #eee,0px 0px 0px 3px #000; position: relative; cursor: pointer; color: #fff;animation: flash 6s linear infinite;}
@keyframes flash {100% {filter: hue-rotate(360deg);}}
</style>
<img id = "pic" src = "https://pic1.imgdb.cn/item/6a2d3392f684928e3d69c3f3.png">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3388637500.mp3" loop autoplay></audio>
本帖最后由 亚伦影音工作室 于 2026-6-13 20:19 编辑 <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; overflow:hidden; width:960px; height: 200px;border:2px solid #ccc; background-color:#800100;left:40%;transform:translate(-50%); }
#wrapper {
position:absolute ; left:20px; bottom:60px;
font:500 50px/0px "Ma Shan Zheng","STKaiti";
letter-spacing:4px;cursor: pointer;
color:#ff0000;
white-space:pre;
width:860px; height: 70px; 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 4px;
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" >
<div id="wrapper" >MP3带歌词播放器</div>
</div>
<script>
const gc = `蓝莲花 - 卡兰迪
亚伦影音工作室
没有什么能够阻挡
你对自由的向往
天马行空的生涯
你的心了无牵挂
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
心中那自由的世界
如此的清澈高远
盛开着永不凋零
蓝莲花
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
穿过幽暗的岁月
也曾感到彷徨
当你低头的瞬间
才发觉脚下的路
心中那自由的世界
如此的清澈高远
盛开着永不凋零
蓝莲花/name/c`;
const gcAr = lrc2HC(gc);
let curkey = 1, 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 = 1;
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);
}
</script>
<script>
var pic = document.getElementById("pic");var fl=true;
wrapper.onclick =pic.onclick = () => aud.paused ? (aud.play(),pic.src = "https://pic1.imgdb.cn/item/6a2d3392f684928e3d69c3f3.png",fl= "true") : (aud.pause(),pic.src = "https://pic1.imgdb.cn/item/6a2d338df684928e3d69c3f0.png",fl= "false");
</script> 问好亚伦老师，这款播放器好看 音乐好听耶~{:4_204:} 播放器和歌词同步还能分两个楼层，真没想到。这播放器真好，感谢亚伦老师{:4_187:} 欣赏亚纶精彩的这种{:4_187:}
页:
[1]