亦是金 发表于 2025-8-9 12:02

ksc歌词【爱拼才会赢】

本帖最后由 亦是金 于 2025-8-9 12:09 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2344202">

<style>
      #bj {
            position: relative;
            width: 1186px;
            height: 700px;
            margin-left: -310px;
            margin-top: 100px;
            overflow: hidden;
            background: url() no-repeat center / cover;
      }
.intro {margin: 0px0px;
      width: 100%;
      height:100%;
      position: absolute;
background: url(http://img.pconline.com.cn/images/upload/upc/tx/itbbs/2105/14/c2/264805337_1620948301813.jpg), linear-gradient(60deg, #9c315e, #e626e8, #5b8cfa, #5bfacf);
background-size: cover;
mix-blend-mode: initial; /*初始*/
animation: hue-rotate 8s linear infinite;
}
@keyframes hue-rotate {
from {opacity:0.85;
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
.lyrics{margin: 0;
            top: 90%;
            left: 50%;
    transform: translate(-50%, -50%);
            height: 100px; /* 调整高度，只容纳当前歌词 */
                 text-align: center;
             position: absolute;
      }
            .lyric-line{
            width: 100%;
            position: relative;
            height: 60px;
            overflow: visible;
   font: 300 45px '华文楷体', 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: #8B4513;
            height: 100%;
            white-space: nowrap;

      }

      .lyric-original {
             color: #2E8B57;
            white-space: nowrap;
            
      }

      #logo {
         position: absolute;
      font-size: 1.5rem;
      font-weight: bold;
      color:#ffffff;
      display: flex;
   left: 5%;
       top: 3%;

    }

      #logo1 {
         position: absolute;
      font-size: 1.5rem;
      font-weight: bold;
      color:#f986fa;
      display: flex;
   left: 5%;
       top: 8%;
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);
    }
   
   #logo::before {
      content: "";
      margin-right: 0.5rem;
      font-size: 1.8rem;
      text-align: center;
    }
#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      background:#0000;
transform:scale(.4);bottom: -100px;
   left: -120px;z-index: 20;}
#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear;
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   cursor: pointer;
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 2px #444;
background:#880000 url('') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}
#prog {position: absolute;z-index: 8;
      width: 78%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 46px;
left:12%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 42px;
      right: 40px;}
</style>
    <audio id="aud" src="https://upfile.mp3.wf/view.php/3affbc4cee70af3e7cf91a8ae98bd100.mp3" autoplay loop></audio>
<div id="bj">
<div class='intro'></div>
    <div id ="logo">套用亚伦老师代码</div>
    <div id ="logo1">试帖ksc歌词同步播放器《爱拼才会赢》</div>
      <div class="lyrics">
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
      <div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>
</div>
      </div>

    <script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `karaoke.add('00:00.000', '00:04.500', '《爱拼才会赢》', '700,725,725,725,725,725,700');
karaoke.add('00:06.000', '00:10.500', '词曲：陈百潭', '600,600,600,600,600,600');
karaoke.add('00:12.000', '00:16.500', '演唱：叶启田', '600,600,600,600,600,600');
karaoke.add('00:18.000', '00:22.500', 'KSC歌词制作：亦是金', '300,300,300,300,300,300,300,300,300,300,300');
karaoke.add('00:24.000', '00:27.000', '。。。。。。', '500,500,500,500,500,500');
karaoke.add('00:28.487', '00:32.068', '一时失志不免怨叹', '347,373,1077,320,344,386,638,1096');
karaoke.add('00:34.221', '00:38.068', '一时落魄不免胆寒', '282,362,1118,296,317,395,718,1359');
karaoke.add('00:39.914', '00:42.164', '那通失去希望', '290,373,348,403,689,1147');
karaoke.add('00:43.485', '00:44.530', '每日醉茫茫', '298,346,366,352,683');
karaoke.add('00:46.273', '00:49.029', '无魂有体亲像稻草人', '317,364,380,351,326,351,356,389,922');
karaoke.add('00:51.281', '00:55.585', '人生可比是海上的波浪', '628,1081,376,326,406,371,375,1045,378,318');
karaoke.add('00:57.007', '01:00.934', '有时起有时落', '303,362,1416,658,750,1438');
karaoke.add('01:03.020', '01:04.581', '好运歹运', '360,1081,360,760');
karaoke.add('01:06.283', '01:09.453', '总嘛要照起来行', '303,338,354,373,710,706,1386');
karaoke.add('01:11.979', '01:13.029', '三分天注定', '304,365,353,338,690');
karaoke.add('01:14.790', '01:15.950', '七分靠打拼', '356,337,338,421,708');
karaoke.add('01:17.339', '01:20.870', '爱拼才会赢', '325,1407,709,660,1430');
karaoke.add('01:22.339', '01:32.870', '。。。。。。', '1500,1500,1500,1500,1500,1500');
karaoke.add('01:34.068', '01:37.580', '一时失志不免怨叹', '307,384,1021,363,357,374,677,1029');
karaoke.add('01:39.660', '01:43.656', '一时落魄不免胆寒', '381,411,1067,344,375,381,648,1389');
karaoke.add('01:45.473', '01:47.471', '那通失去希望', '315,365,340,369,684,925');
karaoke.add('01:49.000', '01:50.128', '每日醉茫茫', '338,361,370,370,689');
karaoke.add('01:51.862', '01:54.593', '无魂有体亲像稻草人', '330,359,368,376,325,334,352,389,898');
karaoke.add('01:56.830', '02:01.185', '人生可比是海上的波浪', '654,1056,416,318,385,416,373,1032,342,363');
karaoke.add('02:02.604', '02:06.716', '有时起有时落', '303,330,1432,649,704,1694');
karaoke.add('02:08.624', '02:10.165', '好运歹运', '329,1090,369,753');
karaoke.add('02:11.829', '02:15.121', '总嘛要照起来行', '313,355,362,389,705,683,1485');
karaoke.add('02:16.609', '02:18.621', '三分天注定', '296,363,306,389,658');
karaoke.add('02:19.426', '02:21.428', '七分靠打拼', '330,359,336,389,588');
karaoke.add('02:22.957', '02:26.457', '爱拼才会赢', '315,1364,664,767,1390');
karaoke.add('02:27.957', '02:50.457', '。。。。。。', '1500,4500,4500,4500,4500,1500');
karaoke.add('02:51.072', '02:55.341', '人生可比是海上的波浪', '656,1086,349,326,359,356,364,1095,338,340');
karaoke.add('02:56.774', '03:01.248', '有时起有时落', '312,357,1400,670,729,2006');
karaoke.add('03:02.787', '03:04.369', '好运歹运', '341,1084,376,781');
karaoke.add('03:06.041', '03:09.865', '总嘛要起工来行', '305,332,331,406,751,615,2084');
karaoke.add('03:11.754', '03:12.813', '三分天注定', '309,359,361,366,664');
karaoke.add('03:14.571', '03:15.596', '七分靠打拼', '320,362,349,352,642');
karaoke.add('03:17.106', '03:20.688', '爱拼才会赢', '304,1421,661,706,1490');

`;
const audio = 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 = '800';
            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`;
      }
      
      // 监听更新歌词
      audio.addEventListener('timeupdate', () => {
            const currentTimeMs = audio.currentTime * 1000;
            const index = getCurrentLyricIndex(lyrics, currentTimeMs);
            
            if (index !== currentIndex) {
                updateLyricDisplay(index);
            }
            
            updateLyricMask(currentTimeMs);
      });
      updateLyricDisplay(0);
    </script>

<script>
      audio.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
      });
      
      function toMin(val) {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60);
            let sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
      }
      
      prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth; }
      
      var progBar = document.getElementById('prog-bar');
      audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });
      
      cp.onclick = cz.onclick = () => audio.paused ? (audio.play(), cz.classList.remove('purple'),intro.style.animationPlayState = 'running') : (audio.pause(), cz.classList.add('purple'),intro.style.animationPlayState = 'paused');
      
      cp.style.animationPlayState = audio.paused ? 'paused' : 'running';
      audio.addEventListener('playing', () => cp.style.animationPlayState = 'running');
      audio.addEventListener('pause', () => cp.style.animationPlayState = 'paused');

const intro= document.querySelector('.intro');
      
       </script>
</td></tr></table>

梦江南 发表于 2025-8-9 14:21

欣赏老师漂亮的音画制作。问好！

红影 发表于 2025-8-9 18:53

能弄出这ksc歌词也和了不起呢。非常著名的一首歌曲，好听{:4_199:}

红影 发表于 2025-8-9 18:53

欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2025-8-9 19:43

梦江南 发表于 2025-8-9 14:21
欣赏老师漂亮的音画制作。问好！

问好梦江南老师！{:4_187:}

亦是金 发表于 2025-8-9 19:44

红影 发表于 2025-8-9 18:53
能弄出这ksc歌词也和了不起呢。非常著名的一首歌曲，好听

问好红影！谢谢欣赏点评！{:4_187:}

亦是金 发表于 2025-8-9 19:44

红影 发表于 2025-8-9 18:53
欣赏亦是金老师好帖

谢谢欣赏！{:4_204:}

红影 发表于 2025-8-9 21:39

亦是金 发表于 2025-8-9 19:44
问好红影！谢谢欣赏点评！

问好亦是金老师，晚上好{:4_187:}

红影 发表于 2025-8-9 21:40

亦是金 发表于 2025-8-9 19:44
谢谢欣赏！

不客气啊，应该谢谢亦是金老师的好帖才是{:4_187:}
页: [1]
查看完整版本: ksc歌词【爱拼才会赢】