论坛 › 欢乐水吧 › 我好心疼现在的自己（柔情版）-洋澜一

亚伦影音工作室 发表于 2025-10-19 15:04

我好心疼现在的自己（柔情版）-洋澜一

本帖最后由 亚伦影音工作室 于 2025-10-19 17:31 编辑 <br /><br /><style>
#papa {margin: 20px -320px;
width: 1286px;
height: 720px;
border: 0px solid gray;
background:radial-gradient(ellipse farthest-corner at center center, transparent 38%,#000 90%),url(https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg),linear-gradient(135deg, #e56420, #c22525, #3d9c31, #000078);

position: relative;

}
#player {position:absolute;top: 10%;
            left: 10%;
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: 30%;
        height: 30%;
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);
}

.lyrics{margin: 0;z-index: 20;
            top: 89%;
            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: #ag0000;
            white-space: nowrap;
            
      }
      #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            
            color: #00ff00;
            font-family: 'Microsoft YaHei', sans-serif;
            text-align: center;
      }
      #wz{text-align: center;
            position: absolute;
      top: 0;z-index: 10;
            left: 0;
            width: 100%;
            height: 100%;
            margin-top: 200px;
         }
      #start-button {z-index: 1000;
      padding: 8px 25px;
            position: absolute;
            background: linear-gradient(135deg, rgba(0,255,0,0.3), rgba(0,100,0,0.5));
            color: #fff;
            border: 2px solid #00ff00;
            border-radius: 4px;
            font-size: 20px;
            cursor: pointer; margin-left: -60px;
          margin-top: 520px;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
      }
      
       #start-button:hover {
            background: linear-gradient(135deg, rgba(0,255,0,0.5), rgba(0,100,0,0.7));
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
      }
            #versionbtn{border-radius: 4px;position: absolute; background: linear-gradient(135deg, rgba(0,255,0,0.3), rgba(0,100,0,0.5));
color:#fff;box-shadow:0px 0px 1pxrgba(0, 255, 0, 1);z-index: 20;border: 2px solid #ccc;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
         
      }      
            
</style>
<div id="papa">
<div class="lyrics" >
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
         
             <div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="start-screen">
<div id="wz">
            <h1 style="font-size: 36px;">我好心疼现在的自己</h1></br>
            <p style="font-size: 18px; ">演唱：洋澜一</p></br>
            <p style="font-size: 18px; ">词廖伟志 | 曲：廖伟志</p></br>
            <p style="font-size: 18px;">出品：亚伦影音工作室</p>
            </div>
            <button id="start-button">点击欣赏</button>
      </div>
         <span id="versionbtn">关闭音画</span>         
</div>
<audio id="audio" src="https://xlaj.cn/upfile/2025/10/01.mp3" loop ></audio>

<script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `我好心疼现在的自己（柔情版）
演唱：洋澜一
作词：廖伟志
作曲：廖伟志
编曲：阿水@珠海华燚录音棚
混音/母带：廖伟志
制作人：亚伦
监制：秦朗
营销推广：诗意文化
发行：亚伦影音工作室
在清晨赶路
在傍晚回家
忙忙碌碌不知多少年
在梦里渴望
在深夜疗伤
在风里蹒跚流浪
岁月风霜了容颜
青春流逝弹指间
回望前半生
最美好的是从前
我好心疼现在的自己
我好怀念那时的年轻
有些悲伤在我心中挥之不去
总在黎明时分暗自叹息
我好心疼现在的自己
孑孓一人吞咽着风雨
可我坚信那些愁苦伤痛别离
终将慢慢飘散云淡风轻
在清晨赶路
在傍晚回家
忙忙碌碌不知多少年
在梦里渴望
在深夜疗伤
在风里蹒跚流浪
岁月风霜了容颜
青春流逝弹指间
回望前半生
最美好的是从前
我好心疼现在的自己
我好怀念那时的年轻
有些悲伤在我心中挥之不去
总在黎明时分暗自叹息
我好心疼现在的自己
孑孓一人吞咽着风雨
可我坚信那些愁苦伤痛别离
终将慢慢飘散云淡风轻
我好心疼现在的自己
我好怀念那时的年轻
有些悲伤在我心中挥之不去
总在黎明时分暗自叹息
我好心疼现在的自己
孑孓一人吞咽着风雨
可我坚信那些愁苦伤痛别离
终将慢慢飘散云淡风轻
`;
const audio = document.getElementById('audio');
      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);
    const startScreen = document.getElementById('start-screen');
    const startButton = document.getElementById('start-button');
   
    // 启动按钮点击事件
   startButton.addEventListener('click', function() {
   startScreen.style.display = 'none';
audio.play();
player.style.autoplay = '1';
   });
versionbtn.addEventListener('click', function() {startScreen.style.display = 'block'; audio.pause();});   
      
player.onclick = () => audio.paused ? (audio.play(),player.style.top= '0',player.style.left = '0',player.style.transform = '',player.style.animationPlayState = 'running') :( audio.pause(),player.style.top= '20%' ,player.style.left= '72%',player.style.transform = 'scale(0.5)',player.style.animationPlayState = 'paused');

</script>

红影 发表于 2025-10-19 15:58

刚在小辣椒的贴子里听到这首歌，在亚伦老师的帖子里又听到了。
这个暂停好奇妙，点击暂停，小播就变小，成为女孩头上的发饰了，有趣。{:4_187:}

红影 发表于 2025-10-19 15:59

欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-10-19 18:00

欣赏亚纶精彩制作{:4_199:}

杨帆 发表于 2025-10-20 19:01

颇有新意，谢谢亚伦老师精彩分享{:4_180:}

查看完整版本: 我好心疼现在的自己（柔情版）-洋澜一