论坛 › 欢乐水吧 › ksc歌词【没有你陪伴真的好孤单】

亚伦影音工作室 发表于 2025-8-7 17:00

ksc歌词【没有你陪伴真的好孤单】

本帖最后由 亚伦影音工作室 于 2025-8-7 18:00 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width: 1186px;
            height: 700px;
            margin-left: -300px;
            margin-top: 140px;
            overflow: hidden;
            background: url(https://pic1.imgdb.cn/item/683a8cc358cb8da5c81e81b5.jpg) no-repeat center / cover;
      }
.intro {margin: 0px0px;
      width: 100%;
      height:100%;
      position: absolute;
background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/587f26c8d9ef319f8085eeb604c654a9.jpg), linear-gradient(45deg, #e56420, #c22525, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 3s linear infinite;
}
@keyframes hue-rotate {
from {opacity:0.85;
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
.lyrics{margin: 0;
            top: 82%;
            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 50px '华文隶书', 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:#fff;
      display: flex;
   left: 30%;
       top: 10%;
    }
   
   #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://img0.oldkids.cn/upload/2019/07/20/ue_15636046423082.mp3" autoplay loop></audio>
<div id="bj">
<div class='intro'></div>
    <div id ="logo">ksc.lrc歌词同步播放器【没有你陪伴真的好孤单】</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:07.500', '《没有你陪伴真的好孤单》', '625,625,625,625,625,625,625,625,625,625,625,625');
karaoke.add('00:08.000', '00:14.500', '演唱：梦然', '1300,1300,1300,1300,1300');
karaoke.add('00:15.000', '00:23.470', 'KSC歌词制作：李亚伦', '770,770,770,770,770,770,770,770,770,770,770');
karaoke.add('00:23.980', '00:27.220', '城市的夜晚霓虹灯璀璨', '224,224,224,324,324,324,324,324,424,524');
karaoke.add('00:29.720', '00:33.257', '点亮黑暗赶不走孤单', '393,393,293,393,293,293,493,393,593');
karaoke.add('00:35.560', '00:40.080', '午夜和白天不停的交换', '222,322,322,322,1522,322,222,422,322,522');
karaoke.add('00:41.280', '00:45.750', '游走在街头一个人孤单', '227,427,327,427,1327,227,327,327,327,527');
karaoke.add('00:47.070', '00:50.236', '节日的狂欢情人的浪漫', '228,328,228,228,428,228,328,328,328,528');
karaoke.add('00:52.840', '00:56.190', '所有的快乐都和我无关', '225,225,325,225,425,325,225,525,325,525');
karaoke.add('00:58.590', '01:03.060', '无聊的工作让人很心烦', '317,317,217,317,1517,317,317,317,317,517');
karaoke.add('01:04.260', '01:09.210', '我又想你了你人在哪端', '365,365,865,365,965,365,265,265,265,865');
karaoke.add('01:13.410', '01:17.730', '没有你陪伴 我真的好孤单', '210,210,210,510,710,410,310,410,210,310,410,410');
karaoke.add('01:18.840', '01:21.972', '我的心好慌乱 被恐惧填满', '136,136,236,436,236,136,236,236,236,236,436,436');
karaoke.add('01:24.580', '01:29.328', '没有你的日子我真的好茫然', '129,229,329,329,429,829,529,229,229,829,229,429');
karaoke.add('01:30.230', '01:33.840', '整天就像丢了灵魂一般', '221,221,221,221,321,521,521,321,521,521');
karaoke.add('01:35.940', '01:40.879', '我没有你陪伴 我真的好孤单', '403,203,203,303,503,403,403,603,303,403,403,403,403');
karaoke.add('01:41.680', '01:45.272', '我的心好慌乱 不知怎么办', '241,241,241,241,441,241,241,241,341,241,441,441');
karaoke.add('01:47.480', '01:52.297', '没有你在身边 真的好不习惯', '209,209,409,409,409,809,409,309,209,409,309,309,409');
karaoke.add('01:53.300', '01:56.877', '如果现在回头会不会太晚', '207,207,207,407,207,307,307,207,307,607,607');
karaoke.add('02:22.480', '02:25.890', '节日的狂欢情人的浪漫', '231,231,231,331,331,331,331,331,531,531');
karaoke.add('02:28.290', '02:31.640', '所有的快乐都和我无关', '285,285,185,285,285,285,385,485,385,485');
karaoke.add('02:33.640', '02:38.500', '无聊的工作让人很心烦', '576,576,276,376,976,376,376,376,376,576');
karaoke.add('02:39.900', '02:44.780', '我又想你了你人在哪端', '308,308,608,408,808,408,408,408,408,808');
karaoke.add('02:48.480', '02:53.384', '没有你陪伴 我真的好孤单', '217,517,417,417,817,417,417,217,217,417,417,417');
karaoke.add('02:53.990', '02:57.398', '我的心好慌乱 被恐惧填满', '259,259,259,259,359,259,259,259,159,159,459,459');
karaoke.add('03:00.000', '03:04.670', '没有你的日子 我真的好茫然', '190,190,390,390,390,590,390,390,290,290,390,390,390');
karaoke.add('03:05.580', '03:08.900', '整天就像丢了灵魂一般', '192,192,192,192,392,492,292,392,492,492');
karaoke.add('03:11.010', '03:16.085', '我没有你陪伴 我真的好孤单', '529,329,429,429,429,429,429,429,229,229,329,429,429');
karaoke.add('03:17.090', '03:20.394', '我的心好慌乱 不知怎么办', '242,242,342,242,342,242,242,242,242,242,242,442');
karaoke.add('03:22.900', '03:27.965', '没有你在身边 真的好不习惯', '205,205,405,405,405,805,405,205,205,405,505,505,405');
karaoke.add('03:28.670', '03:32.400', '如果现在回头会不会太晚', '230,330,230,230,330,330,230,330,430,530,530');
karaoke.add('03:35.010', '03:39.536', '没有你陪伴 我真的好孤单', '294,394,394,394,394,394,494,294,294,394,394,394');
karaoke.add('03:40.240', '03:43.900', '我的心好慌乱 被恐惧填满', '255,255,255,255,255,255,255,355,255,355,455,455');
karaoke.add('03:46.200', '03:50.909', '没有你的日子 我真的好茫然', '193,193,393,293,393,593,393,393,293,293,493,393,393');
karaoke.add('03:51.820', '03:55.520', '整天就像丢了灵魂一般', '230,230,230,230,330,330,530,530,530,530');
karaoke.add('03:57.620', '04:02.446', '我没有你陪伴 我真的好孤单', '202,202,402,402,402,502,402,402,402,302,402,402,402');
karaoke.add('04:03.350', '04:07.018', '我的心好慌乱 不知怎么办', '139,139,439,339,339,339,239,139,239,439,439,439');
karaoke.add('04:09.120', '04:14.024', '没有你在身边 真的好不习惯', '208,208,408,408,408,808,408,308,208,408,308,408,408');
karaoke.add('04:14.930', '04:18.577', '如果现在回头会不会太晚', '277,177,177,177,477,477,277,177,477,477,477');
karaoke.add('04:20.680', '04:26.572', '如果现在回头会不会太晚', '172,272,272,272,372,572,372,272,1272,1272,772');

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

马黑黑 发表于 2025-8-7 18:33

如梦似幻，诱惑力拉满{:4_199:}

红影 发表于 2025-8-7 19:53

KSC是小灰熊卡拉OK字幕文件格式，时间信息精确到字，适合制作卡拉OK视频。
逐字演示的歌词真好{:4_187:}

红影 发表于 2025-8-7 19:55

这个变色背景的制作也很好看，非常梦幻。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-8-7 22:44

漂亮，谢谢亚伦老师精彩分享{:4_190:}

查看完整版本: ksc歌词【没有你陪伴真的好孤单】