朵拉 发表于 2026-5-19 19:29

情深不知何处起 TO：论坛朋友们520快乐！

<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/6a0b0b95febbe1263e6fa794.jpg') 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;
      right: 210px;
      top: 200px;
      width: 60px;
      height: 60px;
      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/view.php/517fb661433af580a3700b5315c1bded.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 = `
情深不知何处起
作词：林叙
作曲：林叙
演唱：陈默之
弦乐编写：马雪涛
吉他：杨旭凯
古筝：陈春旭
二胡：袁筱
弦乐录制：国际首席爱乐乐团
弦乐录音棚：九紫天诚
弦乐录音师：庞岩
混音：周成
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>

朵拉 发表于 2026-5-19 19:31

@亚伦影音工作室
学习亚伦老师的代码，欢迎老师指点~{:4_204:}

亚伦影音工作室 发表于 2026-5-19 19:37

朵拉 发表于 2026-5-19 19:31
@亚伦影音工作室
学习亚伦老师的代码，欢迎老师指点~

代码里的按钮和时间等颜色都可以调和画面要适合！

红影 发表于 2026-5-19 22:17

漂亮，感谢朵宝的美好祝福，也祝朵宝520快乐{:4_187:}

小辣椒 发表于 2026-5-19 22:30

一晃520了，借美帖，祝福520快乐！

小辣椒 发表于 2026-5-19 22:30

欣赏朵拉漂亮的制作{:4_199:}
页: [1]
查看完整版本: 情深不知何处起 TO：论坛朋友们520快乐！