醉美水芙蓉 发表于 3 天前

晚风替我吻过你

<meta charset="utf-8">
<style>
    #bj {
      position: relative;
      width: 1080px;
      height: 600px;
      margin: 0;left: calc(50% - 81px);transform: translateX(-50%);
      overflow: hidden;
      background:#870 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/72828a55700be0700d9017f0ce6d58a5_preview.webp') 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://www.joy127.com/url/150847.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 = `DJ苏魏 - 晚风替我吻过你
LRC编辑：醉美水芙蓉
霓虹灯闪烁着迷离的错觉
人群中找不到熟悉的侧脸
路灯下影子被拉长在街边
那一夜你的心究竟偏向谁
咖啡杯倒映着寂寞的黑夜
看不清爱情里虚伪的谎言
狂欢后剩自己面对着一切
才发现放不下是我的执念
就让晚风替我轻轻吻着你
在这喧嚣舞池埋葬了过去
沉重的鼓点敲碎所有的期许
原来失去你是致命的结局
就让晚风替我轻轻吻着你
抹去眼角那些不堪的泪滴
不要再回头不要再有任何交集
这段回忆就让它随风而去
手机里删不掉昨天的画面
时间它无法把遗憾都停歇
跟着这节奏感撕裂了防线
就让我在今夜彻底的沦陷
就让晚风替我轻轻吻着你
在这喧嚣舞池埋葬了过去
沉重的鼓点敲碎所有的期许
原来失去你是致命的结局
随风而去随风而去
晚风吻过你
在这狂欢的夜里
晚风吻过你
谢谢欣赏！
`;

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>

klxf 发表于 3 天前

漂亮，谢谢精彩分享

醉美水芙蓉 发表于 前天 07:20

klxf 发表于 2026-5-17 22:41
漂亮，谢谢精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 晚风替我吻过你