醉美水芙蓉 发表于 2026-5-22 21:02:51

【水芙蓉播放器】潇洒醉风行

<meta charset="utf-8"><style>
#papa { margin: 130px 0 20px calc(50% - 781px); width: 1400px; height: 850px; background: lightblue; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative;--state: running; border-radius:32px;}
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.vid:nth-of-type(2) { opacity:0.6;mix-blend-mode: screen;mask: linear-gradient(to right top, red 60%, transparent 80%);-webkit-mask: linear-gradient(to right top, red 60%, transparent 80%); }
.vid:nth-of-type(3) {width: 100px; height: 100px;left:20px; top: 20px; cursor: pointer;animation: starfish-rotate 4s linear infinite var(--state);transform-origin: center;transform-style: preserve-3d;transform: rotateX(45deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease; cursor:pointer;z-index: 1;}
.vid:nth-of-type(4) { opacity:0.8;mix-blend-mode: screen;mask: linear-gradient(to right top, red 60%, transparent 80%);-webkit-mask: linear-gradient(to right top, red 60%, transparent 80%);}
#wrapper{position:absolute; white-space: nowrap;padding:2%;font:bold 2.6rem/1.2 "Ma Shan Zheng",STXingkai;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);bottom:88px;z-index:5;}
.char{display:inline-block;padding:0 4px;opacity:0;transform:translate(var(--x),var(--y));animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:translate(0,0);opacity:1;}}
@keyframes flash {to { filter: hue-rotate(360deg); }}
#mplayer{position:absolute;width:600px; top:95%;left:50%;transform:translate(-50%);z-index:60;color:#ffffff;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:100%;height:2px;accent-color:lightgreen;outline:none;cursor:pointer;}
#btnplay{position:absolute;width:60px;height:60px;margin: -60px auto;left:50%;transform:translate(-50%);cursor:pointer;animation:rotating 6s infinite linear var(--state);border-radius:50px;}
@keyframes rotating{0%{transform:rotate(-90deg);}25%{transform:rotate(0deg);}50%{transform:rotate(90deg);}75%{transform:rotate(0deg);}100%{transform:rotate(-90deg);}}
#fullscreen{position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
#sb { transform-origin: 25px 25px; }
#msvg {position: absolute;width: 120px;height: 120px;left: 20px;bottom: 20px;z-index: 9;cursor: pointer;animation: starfish-rotate 3s linear infinite var(--state);transform-origin: center;transform-style: preserve-3d;transform: rotateX(45deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease;}
.video-time {position: absolute;left: 35px;top: 55px;color: white;padding: 4px 8px;border-radius: 12px;font-size: 14px;pointer-events: none;z-index: 2;}
@keyframes starfish-rotate {to {transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg);}}
</style>
</head>
<body>
<div id="papa">
<div class="video-time" id="videoTime">- 00:00</div>
<div id="wrapper"></div>
<div id="mplayer" data-tt="00:0000:00">
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
<img id="btnplay" style="-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 65%);"src="https://bbs.cnzv.cc/up/upload/pic/62/20251114-1fab01d130c58aee5aeba5274d9e0907.png" title="播放/暂停" alt=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="audio" src="https://www.joy127.com/url/151184.mp3" autoplay loop preload="auto"></audio>
<video class="vid" src="http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4" poster="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/61ca0c390d900f36dd00cd383d9f45d7_preview.webp"></video>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop muted playsinline></video>
<video class="vid" id="vplayer" data-tt="00:00 / 00:00" src="http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4" poster="https://638183.freep.cn/638183/small/780.webp" title="播放/暂停"></video>
<video class="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop muted playsinline></video>
<svg id="msvg" class="player rot" viewBox="-100 -100 200 200">
<title>播放/暂停</title>
<symbol id="sb" viewBox="-100 -100 200 200"></symbol>
</svg>
</div>

<script>
const papa = document.getElementById('papa');
const audio = document.getElementById('audio');
const wrapper = document.getElementById('wrapper');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const btnplay = document.getElementById('btnplay');
const fullscreen = document.getElementById('fullscreen');
const vplayer = document.getElementById('vplayer');
const msvg = document.getElementById('msvg');
const sb = document.getElementById('sb');
const gc = `口水歌永兴 - 潇洒醉风行
LRC编辑：醉美水芙蓉
一杯烈酒灌下喉
不问是非不问缘由
街角晚风扯着衣袖
醉意漫过心头
潇洒一回 不后悔
洒脱如风 不惧累
一声狂笑 全世界奉陪
随性自在 星辰作陪
谁说人生非要争斗
我只要一场痛快自由
脚步在夜色里肆意游走
管它明天 什么追逐
月亮摇啊摇
影子飘啊飘
心事都醉倒
我用古筝拨动心弦
用笛声吹散苦与甜
喉咙沙哑唱破长天
谁管什么输赢 什么体面
醉过才知人间滚烫
疯过才懂心之所向
不必假装 不必勉强
这一趟 就该活得张扬
月亮摇啊摇
影子飘啊飘
随我一起闹
一杯烈酒再入喉
往事都随风远走
不问归途 不问以后
今夜只做 最真的我
谢谢欣赏！
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
audio.ontimeupdate = () => {
if(curkey >= gcAr.length) return;
if(audio.currentTime >= gcAr) {
const gap = gcAr?. - gcAr || 2000;
showLrc(gcAr, wrapper, gap);
}
};
audio.onended = () => {
curkey = 0;
};
audio.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
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) / 100;
lrcAr.push(.trim()]);
}
});
return lrcAr.length ? lrcAr : [];
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (audio.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
curkey = Math.max(0, Math.min(curkey, gcAr.length - 1));
let time = gcAr?. - gcAr || 2000;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('');
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.textContent = char;
span.classList.add('char');
const x = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 200;
const y = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 200;
span.style.cssText += `
color: hsl(${Math.random() * 360}, 100%, 60%);
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.4}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
isSeeking = true;
setTimeout(() => isSeeking = false, time);
}             
const vids = document.querySelectorAll('.vid');
var mState = () => {
papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => {
if(audio.paused){
vid.pause();
}else{
vid.play();
}
});
};
audio.addEventListener('canplay', mState);
audio.addEventListener('playing', mState);
audio.addEventListener('pause', mState);
var mseek = false;
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
min = min.toString().padStart(2, '0');
sec = sec.toString().padStart(2, '0');
return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
let remain = audio.duration - audio.currentTime;
document.getElementById('videoTime').textContent = '- ' + toMin(remain);
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.oninput = () =>audio.currentTime = mprog.value / mprog.max * audio.duration;
papa.oncontextmenu = (e) => e.preventDefault();
let fs = true;
fullscreen.onclick = () => {
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
let fsTimer,fyTimer,hhTimer;
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
clearTimeout(fyTimer);
vplayer.style.opacity = '1';
fyTimer = setTimeout(() => {
vplayer.style.opacity = '0';
}, 3000);
clearTimeout(hhTimer);
msvg.style.opacity = '1';
hhTimer = setTimeout(() => {
msvg.style.opacity = '0';
}, 3000);
});
btnplay.onclick = () => {
audio.paused ? audio.play() : audio.pause();
};       
msvg.onclick = vplayer.onclick = () => btnplay.click();       
function loadJs(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', function(){
var dr = _dr('msvg');
dr.circle(0, 0, 90, 'white').addTo(sb);
dr.path('M0 0, 100 0', 'none','darkgreen', 4).addTo(sb).rotates(20, 360);
dr.use('#sb',30, 30, 50, 50).rotates(7);         
dr.use('#sb', -25, -25, 50, 50).style('transform: scale(1.5)');      
});
vplayer.onanimationiteration = () => vplayer.style.setProperty('filter',`hue-rotate(${30 + Math.random()*270}deg)`);
</script>

欧阳风刀 发表于 2026-5-22 21:06:20

特效漂亮，结合播放器元素，视觉的精彩体验。

欧阳风刀 发表于 2026-5-22 21:06:56

潇洒醉风行，行途随心无拘，听罢心胸开阔。

欧阳风刀 发表于 2026-5-22 21:07:17

感谢水芙蓉精心制作分享，周末愉快啊。

醉美水芙蓉 发表于 2026-5-22 21:10:42

欧阳风刀 发表于 2026-5-22 21:07
感谢水芙蓉精心制作分享，周末愉快啊。

问好欧阳帅！祝周末愉快！

春华秋实 发表于 2026-5-23 10:16:37

这歌不错挺喜欢，豁达的心境，舒展自在。

绿蔷薇 发表于 2026-5-23 10:48:26

这是鹿晗吧
他还是短发更帅一些

绿蔷薇 发表于 2026-5-23 10:50:08

曲风洒脱旷远
歌声恣意洒脱
男女声都很精彩的说

绿蔷薇 发表于 2026-5-23 10:51:16

芙蓉的播放器简约好看，特效更添神韵，歌词同步漂亮又精准~~{:4_123:}

绿蔷薇 发表于 2026-5-23 10:51:55

芙蓉制作辛苦了
谢谢周末带来的好蛐蛐
{:6_174:}
页: [1] 2 3
查看完整版本: 【水芙蓉播放器】潇洒醉风行