论坛 › 欢乐水吧 › 等你等你在等你

亚伦影音工作室 发表于 2026-7-9 16:00

等你等你在等你

本帖最后由 亚伦影音工作室 于 2026-7-10 08:44 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
    #papa{ position: relative; width: 1186px; height: 700px; margin-left: -320px; margin-top: 0; overflow: hidden; background:#000 url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png)no-repeat center / cover; --state: paused;}
    #dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 12% 10px;
}
   
.lrc { position: absolute; width:100%; height:100%;margin: 0px 0px; color: #000078;}
    .lrc #ul { width: 100%; padding: 0 10px; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);list-style: none;
      transition: 0.1s all ease;
      margin: 0;
      display: flex;color:#000;
      flex-direction: column;
      align-items: center; }
    .lrc #ul li {font:lighter 1.8em 华文新魏;   transition: 0.1s all ease;list-style-type: none;
      text-align: center; padding: 0 10px; height: 50px; line-height: 60px; cursor: pointer;white-space: nowrap; /* 防止歌词换行 */ }
    .lrc #ul li span { padding: 0 5px;transform-origin: center 50%; /* x轴和y轴均以中心为原点 */
      transition: all 0.1s cubic-bezier(0.4, 1, 0.4, 1); /* 缓动函数让动画更自然 */
      display: inline-block; /* 确保transform-origin生效 */ }
    .lrc #ul li span.active {   font:normal 2em 华文新魏; text-align: center; transform: rotate(-360deg); /* 缩放效果 */}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 80%;font:200 3.2em ZCOOL KuaiLe;color:#000;white-space:pre;-webkit-background-clip:text;z-index: 6;cursor: pointer;display: none;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); letter-spacing: 10px;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
    #btnplay { position: absolute;margin: 52% 50%;width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state);z-index: 60;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#fullscreen{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 70%;
}
</style>

    <div id="papa">
<div ><img id="btnplay" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" title="播放/暂停" alt="" /></div>
<div id="dhgc"><div class="lrc">
    <ul id="ul"></ul>
      </div>
</div>
<div id="geci"></div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="fullscreen">全屏观赏</button>
       </div>


    <audio id="audio" src="https://music.163.com/song/media/outer/url?id=3396641301.mp3" loop autoplay ></audio>
    <script>
let lrc = `等你等你在等你
演唱：柒月
编辑制作：亚伦
长夜漫漫旧梦难忆
心底最苦涩是别离
今生的错过太可惜
就像寒风吹落的泪滴
说缘浅 叹别离
说相守 无归期
今日我 目送你远去
明日把泪藏心底
希望我来生与你再相依
等你 等你 再等你
等你再回到我怀里
长夜漫漫旧梦难忆
心底最苦涩是别离
今生的错过太可惜
就像寒风吹落的泪滴
说缘浅 叹别离
说相守 无归期
今日我 目送你远去
明日把泪藏心底
希望我来生与你再相依
等你 等你 再等你
等你再回到我怀里
说缘浅 叹别离
说相守 无归期
今日我 目送你远去
明日把泪藏心底
希望我来生与你再相依
等你 等你 再等你
等你再回到我怀里
`;
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
       for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var words = lrcData.trim().split('');
            let lineWords = [];
            let startTime = parseTime(lrcTime);
            let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
                (parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
            words.forEach((word, index) => {
                lineWords.push({ time: startTime + index * wordDuration, text: word });
            });
            result.push(lineWords);
      }
function randomColor(){
    const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
    return colors;
}
      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) return i - 1;
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
      createElements();

      let containerHeight = container.clientHeight;
      let liHeight = 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;
      const visibleLines = 1;
      let prevIndex = 1;

      function setOffset() {
            let index = getIndex();
            if (index === -1) index = 0;

            let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
            ul.style.transform = `translateY(-${offset}px)`;

            if (prevIndex !== -1) {
                let prevLi = ul.children;
                if (prevLi) {
                  prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
                  prevLi.classList.remove('active');
                }
            }
            let currentLi = ul.children;
            if (currentLi) currentLi.classList.add('active');

            let currentTime = audio.currentTime;
            let currentLine = result;
            if (currentLine) {
                currentLine.forEach((wordObj, wordIndex) => {
                  let span = currentLi.children;
                  span.style.color = ul.style.color = randomColor();
                  if (currentTime >= wordObj.time &&
                        (wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
                        span.classList.add('active');
                  } else {
                        span.classList.remove('active');
                  }
                });
                const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
                if (!currentLyric) return;
               
                let charIndex = 0;
                for (let j = 0; j < currentLine.length; j++) {
                  if (currentLine.time <= currentTime) {
                        charIndex = j + 1;
                  }
                }
            
            }
prevIndex = index;
      }
audio.addEventListener("timeupdate", setOffset);

const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');}
btnplay.onclick = () => audio.paused ? audio.play() : audio.pause();
audio.onplaying = audio.onpause = () => mState();
</script>

<script>
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function lrcTime (ar) {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}


function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>

<script>
function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('dhgc').style.display = 'block';
      }
   let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };

</script>

梦油 发表于 2026-7-9 17:32

欣赏亚伦精彩制作，祝福亚伦天天快乐。

红影 发表于 2026-7-9 18:59

好漂亮的歌词同步效果，还能切换多行和单行，真漂亮的制作。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-7-9 23:04

匠心之作，谢谢亚伦老师精彩分享{:4_190:}

老谟深虑 发表于 2026-7-10 08:47

欣赏老师的佳作，上午好！

查看完整版本: 等你等你在等你