寻梦花园简单播放器
本帖最后由 亚伦影音工作室 于 2026-5-17 20:18 编辑 <br /><br /><style>#bj {
position: relative;
width: 1080px;
height: 600px;
margin: 0;left: calc(50% - 81px);transform: translateX(-50%);
overflow: hidden;
background:#870 url('https://pic1.imgdb.cn/item/6a0439bf6f6a2d474b49c031.png') no-repeat center / cover;
}
/* 歌词 */
.lrc-wrap {
position: absolute;
width: 100%;
height: auto;
left: 0px;
top: 500px;
text-align: center;
font:normal 2.8em "Ma Shan Zheng","华文新魏","SimHei", "Arial", "sans-serif";
letter-spacing: 6px;
white-space: nowrap;
}
.lrc-wrap span{opacity: 0.4;
color:#0000;
transform: translatex(20px);
filter: drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
}
.lrc-wrapspan.active {opacity: 1;
color:#FF0000;transform: translatex(0deg);transition: color 0.12s ease, text-shadow 0.12s ease;
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);
}
/* 进度 */
#progress {
position: absolute;
width: 900px;
height: 4px;
cursor: pointer;
top: 580px;
left: 50px;
background: #eee;
z-index: 100;
border-radius: 1px;
}
/* 时间 */
#sj {
position: absolute;
width: 125px;
top: 570px;
left:965px;
color: #eee;
font-size: 14px;
}
/* 播放暂停 */
#bfzt {
z-index: 100;
position: absolute;
left: 7px;
top: 568px;
width: 30px;
height: 30px;
cursor: pointer;
background: url("https://pic1.imgdb.cn/item/68ecb824c5157e1a886c5150.png") no-repeat center;
background-size: 100%;
animation: hornSpin 4s linear infinite;
animation-play-state: running;
}
@keyframes hornSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animation-paused #bfzt {
animation-play-state: paused;
}
</style>
<div id="bj">
<div class="lrc-wrap" id="lrcWrap"></div>
<div id="progress"></div>
<div id="bfzt" title="播放暂停"></div>
<div id="sj">00:00 / 00:00</div>
</div>
<audio id="audio" src="https://upfile.mp3.wf/down.php/df07204dfa3f20993eee9cba35d8de77.mp3"loop autoplay>
<script>
const audio = document.getElementById('audio');
const lrcWrap = document.getElementById('lrcWrap');
const progress = document.getElementById('progress');
const bfzt = document.getElementById('bfzt');
const sj = document.getElementById('sj');
const xmhy = `别让昨天的风把今天吹乱-王一佳
词：胡三边@左白里
曲：胡三边@左白里
编曲：玄昌俊
吉他：玄昌俊
混音：T-one
和声：陈小琴
OP：晨琳文化
【版权所有未经许可请勿翻唱】
人生总有数不尽的烦
命运总设下道道的坎
路上的人呐要学会往前看
风雨再大也不过短暂
不必把往事一遍遍翻
不必感叹前路的艰难
就算山再高也有可绕的弯
水再深也有可渡的船
别让昨天的风把今天吹乱
别让心里的苦把笑容冲淡
漂泊在现实与理想之间为难
可这人生谁还没有点遗憾
别让昨天的风把今天吹乱
别让一时的难把脚步放慢
不要慌太阳落山有星光做伴
流过的泪会被时间一点点风干
不必把往事一遍遍翻
不必感叹前路的艰难
就算山再高也有可绕的弯
水再深也有可渡的船
别让昨天的风把今天吹乱
别让心里的苦把笑容冲淡
漂泊在现实与理想之间为难
可这人生谁还没有点遗憾
别让昨天的风把今天吹乱
别让一时的难把脚步放慢
不要慌太阳落山有星光做伴
流过的泪会被时间一点点风干`;
function parseLrc(lrcText) {
const list = [];
const lines = lrcText.split('\n');
const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.+)/;
lines.forEach(line => {
const m = line.match(reg);
if (!m) return;
let min = +m, sec = +m, msStr = m, txt = m.trim();
let ms = +msStr;
if (msStr.length === 2) ms *= 10;
let time = min * 60 + sec + ms / 1000;
if(!txt || /Music|End|编辑/.test(txt)) return;
list.push({time, text: txt});
});
return list;
}
function randomColor(){
const colors = ['#ff4444','#ffbb33','#00C851','#0099cc','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
const lrcList = parseLrc(xmhy);
let timerList = [];
let currLineIdx = -1;
function renderLine(text){
lrcWrap.innerHTML = '';
[...text].forEach(char => {
const span = document.createElement('span');
span.textContent = char;
span.style.color = randomColor();
lrcWrap.appendChild(span);
});
}
function clearAllTimer(){
timerList.forEach(t => clearTimeout(t));
timerList = [];
}
function buildTimeAxis(){
clearAllTimer();
const now = audio.currentTime;
for(let i=0; i<lrcList.length; i++){
const curr = lrcList;
const next = lrcList || {time: audio.duration};
const lineDur = next.time - curr.time;
const chars = [...curr.text];
if(next.time < now) continue;
if(curr.time <= now && next.time > now){
renderLine(curr.text);
currLineIdx = i;
const progress = Math.max(0, Math.min(1, (now - curr.time)/lineDur));
const activeCnt = Math.floor(progress * chars.length);
const spans = lrcWrap.querySelectorAll('span');
spans.forEach((s,idx)=>{
if(idx <= activeCnt) s.classList.add('active');
});
}
const lineDelay = (curr.time - now) * 1000;
if(lineDelay >= 0){
timerList.push(setTimeout(()=>{
renderLine(curr.text);
currLineIdx = i;
}, lineDelay));
}
chars.forEach((char, idx)=>{
const charTime = curr.time + (idx / chars.length) * lineDur;
const charDelay = (charTime - now) * 1000;
if(charDelay >= 0){
timerList.push(setTimeout(()=>{
const spans = lrcWrap.querySelectorAll('span');
if(spans) spans.classList.add('active');
}, charDelay));
}
});
}
}
audio.addEventListener('pause', () => {
clearAllTimer();
document.body.classList.add('animation-paused');
});
audio.addEventListener('play', () => {
buildTimeAxis();
document.body.classList.remove('animation-paused');
});
audio.addEventListener('seeked', buildTimeAxis);
audio.addEventListener('timeupdate', () => {
if(audio.duration){
progress.style.background = `linear-gradient(90deg, red ${(audio.currentTime / audio.duration * 100)}%, white 0)`;
sj.innerText = millToTime(audio.duration * 1000) + " / " + millToTime(audio.currentTime * 1000);
}
if(Math.abs(audio.currentTime - (lrcList?.time||0)) > 0.3){
buildTimeAxis();
}
});
function millToTime(mill) {
var totalSeconds = Math.floor(mill / 1000);
var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return minutes + ":" + seconds;
}
progress.addEventListener('click', (e) => {
audio.currentTime = (e.offsetX / progress.offsetWidth) * audio.duration;
});
bfzt.addEventListener('click', () => {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
</script> 首席沙发，欣赏学习{:4_204:} 非常漂亮的歌词同步效果，小播和进度条也很漂亮。
欣赏亚伦老师好帖{:4_187:}
页:
[1]