论坛 › 欢乐水吧 › 谁不想活得风风光光-许玲玲

亚伦影音工作室 发表于 2025-12-11 18:48

谁不想活得风风光光-许玲玲

本帖最后由 亚伦影音工作室 于 2025-12-11 18:59 编辑 <br /><br /><style>
    #bj {
      position: relative;
      width: 1264px;
      height: 680px;
      margin-left: -300px;
      margin-top: 10px;
      overflow: hidden;
      background: #000;
background-size: cover;
    }
#background{z-index: 1;
width: 100%; height: 100%;
    background: url("https://pic1.imgdb.cn/item/658d7b30c458853aefc07335.jpg")no-repeat;
position: absolute;
    top: 0px;
    left: 0px;
animation: c 6s linear infinite;
background-size: cover;
}
@keyframes c {
    from{transform: scale(1) ;filter: hue-rotate(0deg);
    }
50%{transform: scale(2);
    }
   90%{transform: scale(2);opacity: 0;
    }
100%{transform: scale(2);opacity: 1;
    }
}

.lyrics{margin: 0;z-index: 20;
            top: 89%;display: none;
            left: 50%;
    transform: translate(-50%, -50%);
            height: 100px; /* 调整高度，只容纳当前歌词 */
                 text-align: center;
             position: absolute;animation:flash 1s infinite alternate;
      }
            .lyric-line{
            width: 100%;
            position: relative;
            height: 60px;
            overflow: visible;
   font: 600 40px 'YouYuan', sans-serif;
            line-height: 60px;
         text-align: left;
            white-space: nowrap; /* 禁止换行 */
          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);
      }

      .lyric-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            overflow: hidden;
      color: #ff0000;
            height: 100%;
            white-space: nowrap;
      }

      .lyric-original {
             color: #00aa00;
            white-space: nowrap;
            
      }   
      
#wrapper {z-index: 9;
                position: absolute; writing-mode: vertical-lr;white-space: pre; width: 60px;height: 90%;top: 50px; left: 88%;
                padding: 0px;
                font:normal 2.6em 'YouYuan', sans-serif;
                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);
      
        }

        .char {
                display: inline-block;
                padding: 2px 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards, flash 1s infinite alternate;
        }
       
        @keyframes fadeIn {
                to {
                        transform:scale(1);
                        opacity: 1;
                }
        }
        @keyframes flash {
                to { filter: hue-rotate(360deg)brightness(60%); }
        }
.lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; opacity: 0;}
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #fff; font: 300 20px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #FF0000; font-weight: 650; }
#s,#dh, #d, #g,#fullscreen{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;z-index: 120;
font-size: 12px;
border: none;
cursor: pointer;top: 50px;left: 13%;
}
#player {position:absolute;top: 65%;z-index: 99;
            left: 77%;
width: 300px;
height: 300px;
display: grid;
      place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
      width: 25%;
      height: 25%;
display: grid;
      place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}

</style>

<div id="bj">
<div class="s" id="background"></div>
<div id="wrapper">谁不想活得风风光光-许玲玲</div>

    <div class="lyrics" >
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
<div>
<span id="g" title="横/竖歌词模式">横排歌词</span>
<span id="d" onclick="btn()" title="多行歌词模式">多行歌词</span>
<span id="dh" onclick="btndh()" title="动画">动画变色</span>
<span id="s" onclick="btns()" title="动画">动画复原</span>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/6a/14/68/737947cafcb8d8e109b58aecd498afaa/audio.mp3" loop autoplay></audio>
<script>
    const lrc = `谁不想活得风风光光-许玲玲
词：高森河
曲：隔壁老王
出品 亚伦影音工作室
尝遍了人间的世态炎凉
回过头皱纹已爬上脸庞
借不到亲朋好友的力量
想得到的只能靠自己闯
中不了泼天富贵的大奖
也留不住最爱的人在身旁
分不清这人心的魑魅魍魉
生活让我遍体鳞伤
谁不想 在人前活的风风光光
走到哪里都能受人敬仰
现实却人模狗样为碎银几两
只能打碎了牙自己扛
谁不想 与爱的人到地老天荒
回家能喝一碗热腾腾的汤
可无奈现实总是先下手为强
人生的道场何时轮到我做庄
中不了泼天富贵的大奖
也留不住最爱的人在身旁
分不清这人心的魑魅魍魉
生活让我遍体鳞伤
谁不想 在人前活的风风光光
走到哪里都能受人敬仰
现实却人模狗样为碎银几两
只能打碎了牙自己扛
谁不想 与爱的人到地老天荒
回家能喝一碗热腾腾的汤
可无奈现实总是先下手为强
人生的道场何时轮到我做庄

`;

   const aud= document.getElementById('aud');
      const lyrics = parseLyrics(lrc);
      const lyricMask = document.querySelector('.lyric-mask');
      const lyricOriginal = document.querySelector('.lyric-original');
      
      let currentIndex = -1;
      let currentLyric = null;
      
      // 解析歌词（支持两种格式）
      function parseLyrics(lrcText) {
            const lyrics = [];
            if (lrcText.includes('karaoke.add')) {
                const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
                let match;
                while ((match = lineRegex.exec(lrcText)) !== null) {
                  const startTime = timeToMs(match);
                  const endTime = timeToMs(match);
                  const text = match.replace(/\[|\]/g, '').trim();
                  const durations = match.split(',').map(Number);
                  if (text) {
                        lyrics.push({startTime, endTime, text, durations});
                  }
                }
            }
            else if (lrcText.includes('[')) {
                const lines = lrcText.split('\n').filter(line => line.trim());
                lines.forEach((line, index) => {
                  const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
                  if (timeMatch) {
                        const timeStr = timeMatch;
                        const text = line.replace(/\[.*?\]/, '').trim();
                        if (text) {
                            const startTime = timeToMs(timeStr);
                            const nextLine = lines;
                            const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
                            const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
                            lyrics.push({
                              startTime,
                              endTime,
                              text,
                              durations: calculateCharDurations(text, startTime, endTime)
                            });
                        }
                  }
                });
            }
            return lyrics;
      }
      function calculateCharDurations(text, startTime, endTime) {
            const totalDuration = endTime - startTime;
            const charCount = text.length;
            const baseDur = Math.floor(totalDuration / charCount);
            const durations = new Array(charCount).fill(baseDur);
            const remainder = totalDuration % charCount;
            for (let i = 0; i < remainder; i++) {
                durations++;
            }
            return durations;
      }
      function timeToMs(timeStr) {
            const parts = timeStr.split(':');
            const minutes = parseInt(parts, 10);
            const secondsAndMs = parts.split('.');
            const seconds = parseInt(secondsAndMs, 10);
            const ms = parseInt(secondsAndMs || 0, 10);
            return minutes * 60 * 1000 + seconds * 1000 + ms;
      }
      function getCurrentLyricIndex(lyrics, currentTimeMs) {
            for (let i = 0; i < lyrics.length; i++) {
                if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
                  return i;
                }
            }
            return -1;
      }
      function updateLyricDisplay(index) {
            if (index < 0 || index >= lyrics.length) return;
            currentIndex = index;
            currentLyric = lyrics;
            lyricOriginal.textContent = currentLyric.text;
            lyricMask.textContent = currentLyric.text;
            lyricMask.style.width = '0%';
      }
      function updateLyricMask(currentTimeMs) {
            if (!currentLyric) return;
            const lyricStartTime = currentLyric.startTime;
            const elapsed = currentTimeMs - lyricStartTime;
            const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
            let charIndex = 0;
            let accumulatedTime = 0;
            
            for (let i = 0; i < currentLyric.durations.length; i++) {
                accumulatedTime += currentLyric.durations;
                if (elapsed <= accumulatedTime) {
                  charIndex = i + 1;
                  break;
                }
            }
            
            if (elapsed >= totalDuration) {
                charIndex = currentLyric.text.length;
            }
            
            charIndex = Math.min(charIndex, currentLyric.text.length);
            
            const tempSpan = document.createElement('span');
            tempSpan.style.visibility = 'hidden';
            tempSpan.style.position = 'absolute';
            tempSpan.style.fontSize = '50px';
            tempSpan.style.fontWeight = '300';
            document.body.appendChild(tempSpan);
            
            const visibleText = currentLyric.text.substring(0, charIndex);
            tempSpan.textContent = visibleText;
            const width = tempSpan.offsetWidth;
            document.body.removeChild(tempSpan);
            
            lyricMask.style.width = `${width}px`;
      }
      
      // 监听更新歌词
      aud.addEventListener('timeupdate', () => {
            const currentTimeMs = aud.currentTime * 1000;
            const index = getCurrentLyricIndex(lyrics, currentTimeMs);
            
            if (index !== currentIndex) {
                updateLyricDisplay(index);
            }
            
            updateLyricMask(currentTimeMs);
      });
      updateLyricDisplay(0);



const gcAr = lrc2HC(lrc);
        let curkey = 0, isSeeking = false;

        aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
        };

        aud.onended = () => {
                curkey = 0;
                aud.play();
        }

        aud.onseeked = () => calcKey();

        function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                                let result = item.match(reg);
                                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                                lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
        };

        function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                                curkey = j - 1;
                                break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
        }

        function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 600 : -300);
                        const y = Math.random() * (Math.random() > 0.5 ? 600 : -300);
                        span.style.cssText += `
                                color: #${Math.random().toString(16).substring(2,8)};
                                --x: ${x}px;
                                --y: ${y}px;
                                --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
        }
</script>
<script>
let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var 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 obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      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;
      }

      function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);

</script>


<script>
   
var g1=document.getElementById("wrapper");
var dh=document.getElementById("background");
const g2 = document.querySelector('.lyrics');
const d = document.querySelector('.lrc');
const s = document.querySelector('.s');
functionbtn(){
            d.style.opacity= '1';

            g1.style.display = 'none';
            g2.style.display = 'none';
      };



   
            
          functionbtndh(){
            dh.style.filter= 'hue-rotate(360deg)';
dh.style.animation= 'c 6s linear infinite';
};
functionbtns(){
            s.style.filter= 'hue-rotate(0deg)';
s.style.animation= 'c 6s linear infinite';
};



let fss = true;
      g.onclick = () => {
            if (fss) {g.innerText = '竖排歌词';
               g1.style.display = 'none';
            g2.style.display = 'block';
d.style.opacity= '0';
            }else {g.innerText = '横排歌词';
               g1.style.display = 'block';
            g2.style.display = 'none';
d.style.opacity= '0';
            }
            fss = !fss;
      };


let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                bj.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',background.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',background.style.animationPlayState = 'paused');
</script>

杨帆 发表于 2025-12-12 23:17

精致的多功能的播放器，谢谢亚伦老师精彩分享

查看完整版本: 谁不想活得风风光光-许玲玲