五百年桑田沧海 （ 套用学习黑黑烟雨云台播放器效果 ）
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 100px; --bg: url('https://wj.zp68.com/lxx/yunhua/2026/08/9/01.jpg') no-repeat center/cover; color: #fff; position:relative; margin: 130px 0; --ma-size: 12%; width: 1600px; height: 899px; }
.player { width: 480px; bottom: 20px; }
.btnFs { top: 25px;left: 20px; }
#player1 { position: absolute;right: 3%; top: 10%; width: 28%; height: 15%; overflow: hidden; }
.mpic { position: absolute; left: 0; height: 100%; white-space: nowrap; animation: move 50s linear infinite var(--state); }
.mpic img { height: 100%; aspect-ratio: 1/1; border-radius: 50%; opacity: 0.5; transition: 1s; cursor: pointer; }
.mpic img:hover { opacity: 1; }
@keyframes move { to { transform: translateX(-50%); } }
#lyricBox{
position:absolute;
left:50%;
bottom:120px;
transform:translateX(-50%);
width:720px;
height:80px;
overflow:hidden;
font-family:"LiSu",隶书,sans-serif;
font-size:28px;
text-align:center;
z-index:9999;
line-height:80px;
pointer-events: none;
color: rgba(255,255,255,0.3);
background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
text-shadow: none !important;
}
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4" autoplay loop muted></video>
<div id="player1">
<div class="mpic">
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/02.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/03.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/01.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/04.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/02.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/03.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/01.jpg" load="lazy" alt="" />
<img src="https://wj.zp68.com/lxx/yunhua/2026/08/9/04.jpg" load="lazy" alt="" />
</div>
</div>
<div id="lyricBox">点击播放音乐</div>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://wj.zp68.com/lxx/yunhua/2026/08/9/01.mp3', '五百年桑田沧海']],
};
const TIME_OFFSET = 2.55;
const MIN_LINE_DURATION = 5.9;
const lrcText = `五百年桑田沧海
作词：阎肃
作曲：许镜清
86 版西游记插曲
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
激荡着情怀
为什么 为什么
偏有这样的安排
酷咔音乐kkmp3.com
五百年桑田沧海
顽石也长满青苔
长满青苔
只一颗心儿未死
向往着逍遥自在
逍遥自在
哪怕是野火焚烧
哪怕是冰雪覆盖
依然是志向不改
依然是信念不衰
蹉跎了岁月
激荡着情怀
为什么 为什么
偏有这样的安排
为什么 为什么
偏有这样的安排
谢谢欣赏
`;
let audioEl = null;
let lyricList = [];
let currentLineIndex = -1;
let rafId = null;
const lyricEl = document.getElementById("lyricBox");
function parseLrc(lrc) {
const list = [];
const reg = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/g;
let res;
while ((res = reg.exec(lrc)) !== null) {
const time = Number(res) * 60 + Number(res) + Number(res) / 100;
let text = res.trim();
if (!text) text = "♪ ♪ ♪";
list.push({ time, text });
}
return list.sort((a, b) => a.time - b.time);
}
lyricList = parseLrc(lrcText);
function initLyricEndTime() {
if (!lyricList.length) return;
lyricList.forEach((item, idx, arr) => {
if (idx + 1 < arr.length) {
const naturalEnd = arr.time;
const forcedEnd = item.time + MIN_LINE_DURATION;
item.tEnd = Math.max(naturalEnd, forcedEnd);
} else {
item.tEnd = Infinity;
}
});
}
initLyricEndTime();
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
function tzRun() {
const aud = new AudPlayer(options);
const pics = document.querySelectorAll('.mpic img');
pics.forEach(pic => {
pic.title = '更换背景';
pic.onclick = () => aud.pa.style.backgroundImage = `url(${pic.src})`;
});
let count = 0;
const findAudio = setInterval(() => {
count++;
audioEl = aud.audio || aud.aud || aud.player || aud.$audio || document.querySelector('.pa audio') || document.querySelector('audio');
if (audioEl) {
clearInterval(findAudio);
lyricEl.innerText = "准备播放";
const refreshEndTime = () => {
if (lyricList.length > 0) {
const lastLine = lyricList;
lastLine.tEnd = Infinity;
}
};
if (audioEl.readyState >= 1) refreshEndTime();
audioEl.addEventListener('loadedmetadata', refreshEndTime);
audioEl.addEventListener('durationchange', refreshEndTime);
bindAudioEvent();
rafId = requestAnimationFrame(renderMask);
}
if (count > 150) {
clearInterval(findAudio);
lyricEl.innerText = "音频加载失败";
}
}, 100);
function bindAudioEvent() {
audioEl.addEventListener('pause', () => {
cancelAnimationFrame(rafId);
rafId = null;
});
audioEl.addEventListener('play', () => {
if (!rafId) rafId = requestAnimationFrame(renderMask);
});
audioEl.addEventListener('seeked', resetLyricSync);
audioEl.addEventListener('ended', () => {
lyricEl.style.webkitMaskImage = lyricEl.style.maskImage = 'linear-gradient(to right,#000 0%,#000 100%,transparent 100%)';
cancelAnimationFrame(rafId);
rafId = null;
});
}
function resetLyricSync() {
currentLineIndex = -1;
lyricEl.style.webkitMaskImage = lyricEl.style.maskImage = 'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
cancelAnimationFrame(rafId);
rafId = null;
if (!audioEl.paused) {
rafId = requestAnimationFrame(renderMask);
}
}
function renderMask() {
if (!audioEl || !lyricList.length) return;
const curTime = audioEl.currentTime + TIME_OFFSET;
let idx = currentLineIndex;
if (idx < 0 || curTime < lyricList.time || curTime >= lyricList.tEnd) {
for (let i = lyricList.length - 1; i >= 0; i--) {
if (curTime >= lyricList.time && curTime < lyricList.tEnd) {
idx = i;
break;
}
}
if (idx !== currentLineIndex && idx >= 0) {
lyricEl.textContent = lyricList.text;
currentLineIndex = idx;
}
}
if (currentLineIndex >= 0) {
const line = lyricList;
const duration = line.tEnd - line.time;
const progress = Math.min(Math.max((curTime - line.time) / duration, 0), 1);
const per = (progress * 100).toFixed(2) + '%';
if (progress >= 1) {
lyricEl.style.webkitMaskImage = lyricEl.style.maskImage = 'linear-gradient(to right,#000 0%,#000 100%,transparent 100%)';
} else {
lyricEl.style.webkitMaskImage = lyricEl.style.maskImage = `linear-gradient(to right,#000 0%,#000 ${per},transparent ${per})`;
}
}
rafId = requestAnimationFrame(renderMask);
}
aud.on("switch", resetLyricSync);
}
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
</script>
https://wj.zp68.com/lxx/yunhua/2026/08/9/fm.jpg @马黑黑
黑黑套用玩一个，就一个图图，现在做图也是没有时间就简单直接一个图换了背景颜色，加了歌词同步 感谢黑黑源码分享{:4_187:} 精彩的制作，祝创造好心情。 来欣赏小辣椒精品佳作 制作大气磅礴 制作大气磅礴 歌声唯美动听 感谢小辣椒带来的精彩，辛苦了，祝福小辣椒家庭温馨如春，事业顺利如舟，身体强健心情美。 亲爱的这个制作真漂亮，使用同一张图图的不同颜色，还移动到了旁边不影响展示。
欣赏亲爱的好帖{:4_199:} 好听好看，效果漂亮，谢谢小辣椒精彩分享{:4_204:} 小辣椒 发表于 2026-8-9 20:56
@马黑黑
黑黑套用玩一个，就一个图图，现在做图也是没有时间就简单直接一个图换了背景颜色，加了歌词同 ...
漂亮，美 制作非常大气，特别是背景的云雾的游动。欣赏小辣椒带来的精彩{:4_187:} 五百年桑田沧海大气洒脱，小辣椒出手就不一样，太棒了！{:4_187:} 加了歌词的特别吸引人，好听的歌曲！{:4_204:} 精彩，精彩！{:4_178:}
页:
[1]