论坛 › 欢乐水吧 › 孙露 - 鬼迷心窍

亚伦影音工作室 发表于 2025-8-13 17:25

孙露 - 鬼迷心窍

本帖最后由 亚伦影音工作室 于 2025-8-13 17:25 编辑 <br /><br /><style>
#bj {
            position: relative;
            width: 1280px;
            height: 720px;
            margin-left: -300px;
            margin-top: 10px;
            overflow: hidden;z-index:12345;
            background: ;
      }


      .intro {margin: 0px0px;z-index:2;
      width: 100%;
      height:100%;
      position: absolute;
background:url(https://img4.oldkids.cn/upload/2021/04/19/photo_0_20210419063607797.jpg),repeating-linear-gradient(157deg, rgba(250, 4, 10, 0.55) 0%,rgba(73, 185, 41, 0.45) 28%,rgba(4, 38, 245, 0.34) 50%,rgba(73, 185, 41, 0.45) 72%,rgba(250, 4, 10, 0.55) 100%);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 3s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}


#balloonCanvas{ z-index:3;
         pointer-events: none;
    position: absolute;overflow: hidden;
    left:0;top: 0px;
    }
    .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;
            
      }   
</style>

<divid="bj">
<div class='intro'></div>

   
    <canvas id="balloonCanvas" ></canvas>

<div class="lyrics" >
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
</div>

<audio id="audio" src="https://www.oldkids.cn/upload/2020/10/06/ue_16019599208356.mp3" autoplay loop></audio>
   <script>
      
      
      const balloonCanvas = document.getElementById('balloonCanvas');
      const balloonCtx = balloonCanvas.getContext('2d');
      
      balloonCtx.imageSmoothingEnabled = true;
      let mouseX = 0;
      let mouseY = 0;
      let isMouseMoving = false;
      const balloons = [];
      
      const balloonColors = [
            'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink'
      ];
      
      const balloonSizeRange = ;

      balloonCanvas.width = window.innerWidth;
      balloonCanvas.height = window.innerHeight;

      
      document.addEventListener('mousemove', function(event) {
            mouseX = event.clientX;
            mouseY = event.clientY;
            isMouseMoving = true;

         
            const speed = calculateMouseSpeed(event);
            
         
            const balloonCount = Math.min(Math.floor(speed * 1), 2);
            
            for (let i = 0; i < balloonCount; i++) {
                createBalloon();
            }

            setTimeout(() => {
                isMouseMoving = false;
            }, 200);
      });

      
      document.addEventListener('click', function(event) {
            mouseX = event.clientX;
            mouseY = event.clientY;
            
            for (let i = 0; i < 3; i++) {
                createBalloon(true);
            }
      });

      
      const images = document.getElementsByTagName('img');
      for (let i = 0; i < images.length; i++) {
            images.addEventListener('click', function() {
                balloons.forEach(balloon => {
                  const angle = Math.random() * Math.PI * 2;
                  const speed = (Math.random() * 5 + 3);
                  balloon.vx = Math.cos(angle) * speed;
                  balloon.vy = Math.sin(angle) * speed;
                });
            });
      }

      
      let lastX = 0, lastY = 0, lastTime = 0;
      function calculateMouseSpeed(event) {
            const now = Date.now();
            const timeDiff = (now - lastTime) / 1000;
            lastTime = now;
            
            if (timeDiff === 0) return 0;
            
            const dx = event.clientX - lastX;
            const dy = event.clientY - lastY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            lastX = event.clientX;
            lastY = event.clientY;
            
            return distance / timeDiff;
      }

      
      function createBalloon(isClick = false) {
            
            const color = balloonColors;
            
            
            const sizeMultiplier = isClick ? 1.2 : 1;
            const speedMultiplier = isClick ? 1.2 : 1;
            
            const angle = Math.random() * Math.PI * 2;
            const speed = (Math.random() * 2 + 1) * speedMultiplier;
            
            const balloon = {
                x: mouseX,
                y: mouseY,
                radiusX: Math.random() * balloonSizeRange + balloonSizeRange * sizeMultiplier,
                radiusY: (Math.random() * 0.5 + 1) * (Math.random() * balloonSizeRange + balloonSizeRange * sizeMultiplier), // 闀垮渾褰㈢姸
                color: color,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                life: Math.random() * 80 + 50,               decay: Math.random() * 0.02 + 0.01,
                brightness: 500
            };
            
            balloons.push(balloon);
      }

      
      function createFallingBalloon() {
            const color = balloonColors;
            const radiusX = Math.random() * balloonSizeRange + balloonSizeRange;
            const radiusY = (Math.random() * 0.5 + 1) * (Math.random() * balloonSizeRange + balloonSizeRange); // 闀垮渾褰㈢姸
            const balloon = {
                x: Math.random() * balloonCanvas.width,
                y: 0,
                radiusX: radiusX,
                radiusY: radiusY,
                color: color,
                vx: (Math.random() - 0.5) * 2,
                vy: Math.random() * 2 + 1,
                life: Math.random() * 80 + 50,
                decay: Math.random() * 0.02 + 0.01,
                brightness: 1
            };
            balloons.push(balloon);
      }

      
      for (let i = 0; i < 3; i++) {
            createFallingBalloon();
      }

      
      function update() {
            
            balloonCtx.clearRect(0, 0, balloonCanvas.width, balloonCanvas.height);

            if (!isMouseMoving) {
               
                balloons.forEach(balloon => {
                  const randomFactor = Math.random() * 0.1 + 1;
                  balloon.vx *= 1.05 * randomFactor;
                  balloon.vy *= 1.05 * randomFactor;
                });
            }

            for (let i = balloons.length - 1; i >= 0; i--) {
                const balloon = balloons;

               
                balloon.x += balloon.vx;
                balloon.y += balloon.vy;
               
               
                balloon.vx *= 0.98;
                balloon.vy *= 0.98;
               
               
                balloon.brightness -= balloon.decay;
                balloon.life--;

               
                if (balloon.x - balloon.radiusX < 0) {
                  balloon.x = balloon.radiusX;
                  balloon.vx = -balloon.vx * 0.8;
                }
                if (balloon.x + balloon.radiusX > balloonCanvas.width) {
                  balloon.x = balloonCanvas.width - balloon.radiusX;
                  balloon.vx = -balloon.vx * 0.8;
                }
                if (balloon.y - balloon.radiusY < 0) {
                  balloon.y = balloon.radiusY;
                  balloon.vy = -balloon.vy * 0.8;
                }
                if (balloon.y + balloon.radiusY > balloonCanvas.height) {
                  balloon.y = balloonCanvas.height - balloon.radiusY;
                  balloon.vy = -balloon.vy * 0.8;
                }

                if (balloon.life <= 0 || balloon.brightness <= 0) {
                  balloons.splice(i, 1);
                } else {
                  
                  drawBalloon(balloon);
                }
            }

            requestAnimationFrame(update);
      }

      
      function drawBalloon(balloon) {
         
            balloonCtx.shadowColor = 'rgba(0, 0, 0, 0.3)';
            balloonCtx.shadowBlur = 5;
            balloonCtx.shadowOffsetX = 2;
            balloonCtx.shadowOffsetY = 2;

         
            const gradient = balloonCtx.createRadialGradient(
                balloon.x, balloon.y, 0,
                balloon.x, balloon.y, Math.max(balloon.radiusX, balloon.radiusY)
            );
            gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
            gradient.addColorStop(0.2, 'rgba(0, 0, 0, 0)');
            gradient.addColorStop(1, balloon.color);

            
            balloonCtx.beginPath();
            balloonCtx.ellipse(balloon.x, balloon.y, balloon.radiusX, balloon.radiusY, 0, 0, Math.PI * 2);
            balloonCtx.fillStyle = gradient;
            balloonCtx.fill();
            
            
            balloonCtx.beginPath();
            balloonCtx.ellipse(balloon.x, balloon.y, balloon.radiusX, balloon.radiusY, 0, 0, Math.PI * 2);
            balloonCtx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
            balloonCtx.lineWidth = 1;
            balloonCtx.stroke();
            
            
            balloonCtx.shadowColor = 'rgba(0, 0, 0, 0)';
      }

      update();

      
      window.addEventListener('resize', function() {
            balloonCanvas.width = window.innerWidth;
            balloonCanvas.height = window.innerHeight;
      });
    </script>
<script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `karaoke.add('00:00.00-460', '00:00.000', '出品：亚伦影音工作室', '0,0,0,0,0,0,0,0,0,0');
karaoke.add('00:01.368', '00:04.044', '曾经真的以为人生就这样了', '223,223,223,223,223,223,223,223,223,223,223,223');
karaoke.add('00:04.555', '00:08.175', '平静的心拒绝再有浪潮', '362,362,362,362,362,362,362,362,362,362');
karaoke.add('00:08.682', '00:11.674', '斩了千次的情丝却断不了', '272,272,272,272,272,272,272,272,272,272,272');
karaoke.add('00:12.183', '00:15.909', '百转千折它将我围绕', '414,414,414,414,414,414,414,414,414');
karaoke.add('00:16.415', '00:19.231', '有人问我你究竟是哪里好', '256,256,256,256,256,256,256,256,256,256,256');
karaoke.add('00:19.732', '00:23.170', '这么多年我还忘不了', '382,382,382,382,382,382,382,382,382');
karaoke.add('00:23.677', '00:27.010', '春风再美也比不上你的笑', '303,303,303,303,303,303,303,303,303,303,303');
karaoke.add('00:27.517', '00:31.997', '没见过你的人不会明了', '448,448,448,448,448,448,448,448,448,448');
karaoke.add('00:32.506', '00:35.218', '是鬼迷了心窍也好', '339,339,339,339,339,339,339,339');
karaoke.add('00:35.719', '00:39.471', '是前世的因缘也好', '469,469,469,469,469,469,469,469');
karaoke.add('00:39.977', '00:43.207', '然而这一切已不再重要', '323,323,323,323,323,323,323,323,323,323');
karaoke.add('00:43.713', '00:47.653', '如果你能够重回我怀抱', '394,394,394,394,394,394,394,394,394,394');
karaoke.add('00:48.153', '00:51.305', '是命运的安排也好', '394,394,394,394,394,394,394,394');
karaoke.add('00:51.811', '00:55.042', '是你存心的捉弄也好', '359,359,359,359,359,359,359,359,359');
karaoke.add('00:55.546', '00:58.646', '然而这一切已不再重要', '310,310,310,310,310,310,310,310,310,310');
karaoke.add('00:59.151', '01:04.781', '我愿意随你到天涯海角', '563,563,563,563,563,563,563,563,563,563');
karaoke.add('01:05.290', '01:08.386', '虽然岁月总是匆匆的催人老', '258,258,258,258,258,258,258,258,258,258,258,258');
karaoke.add('01:08.895', '01:12.625', '虽然情爱总是让人烦恼', '373,373,373,373,373,373,373,373,373,373');
karaoke.add('01:13.127', '01:16.257', '虽然未来如何不能知道', '313,313,313,313,313,313,313,313,313,313');
karaoke.add('01:16.758', '01:21.168', '现在说再见会不会太早', '441,441,441,441,441,441,441,441,441,441');
karaoke.add('01:21.669', '01:22.992', '孙露 - 鬼迷心窍', '147,147,147,147,147,147,147,147,147');
karaoke.add('01:23.497', '01:25.345', '作词：李宗盛', '308,308,308,308,308,308');
karaoke.add('01:25.848', '01:27.330', '作曲：李宗盛', '247,247,247,247,247,247');
karaoke.add('01:27.833', '01:50.033', '出品：亚伦影音工作室', '2220,2220,2220,2220,2220,2220,2220,2220,2220,2220');
karaoke.add('01:50.534', '01:53.138', '曾经真的以为人生就这样了', '217,217,217,217,217,217,217,217,217,217,217,217');
karaoke.add('01:53.642', '01:57.662', '平静的心拒绝再有浪潮', '402,402,402,402,402,402,402,402,402,402');
karaoke.add('01:58.162', '02:00.692', '斩了千次的情丝却断不了', '230,230,230,230,230,230,230,230,230,230,230');
karaoke.add('02:01.192', '02:05.260', '百转千折它将我围绕', '452,452,452,452,452,452,452,452,452');
karaoke.add('02:05.763', '02:08.601', '有人问我你究竟是哪里好', '258,258,258,258,258,258,258,258,258,258,258');
karaoke.add('02:09.107', '02:12.806', '这么多年我还忘不了', '411,411,411,411,411,411,411,411,411');
karaoke.add('02:13.313', '02:16.305', '春风再美也比不上你的笑', '272,272,272,272,272,272,272,272,272,272,272');
karaoke.add('02:16.813', '02:21.243', '没见过你的人不会明了', '443,443,443,443,443,443,443,443,443,443');
karaoke.add('02:21.750', '02:23.470', '是鬼迷了心窍也好', '215,215,215,215,215,215,215,215');
karaoke.add('02:23.971', '02:28.819', '是前世的因缘也好', '606,606,606,606,606,606,606,606');
karaoke.add('02:29.326', '02:32.086', '然而这一切已不再重要', '276,276,276,276,276,276,276,276,276,276');
karaoke.add('02:32.591', '02:36.841', '如果你能够重回我怀抱', '425,425,425,425,425,425,425,425,425,425');
karaoke.add('02:37.345', '02:40.105', '是命运的安排也好', '345,345,345,345,345,345,345,345');
karaoke.add('02:40.611', '02:44.157', '是你存心的捉弄也好', '394,394,394,394,394,394,394,394,394');
karaoke.add('02:44.660', '02:48.020', '然而这一切已不再重要', '336,336,336,336,336,336,336,336,336,336');
karaoke.add('02:48.526', '02:54.156', '我愿意随你到天涯海角', '563,563,563,563,563,563,563,563,563,563');
karaoke.add('02:54.664', '02:57.316', '虽然岁月总是匆匆的催人老', '221,221,221,221,221,221,221,221,221,221,221,221');
karaoke.add('02:57.825', '03:01.945', '虽然情爱总是让人烦恼', '412,412,412,412,412,412,412,412,412,412');
karaoke.add('03:02.449', '03:05.579', '虽然未来如何不能知道', '313,313,313,313,313,313,313,313,313,313');
karaoke.add('03:06.080', '03:11.770', '现在说再见会不会太早', '569,569,569,569,569,569,569,569,569,569');
karaoke.add('03:12.271', '03:14.305', '孙露 - 鬼迷心窍', '226,226,226,226,226,226,226,226,226');
karaoke.add('03:14.805', '03:16.839', '作词：李宗盛', '339,339,339,339,339,339');
karaoke.add('03:17.339', '03:19.631', '作曲：李宗盛', '382,382,382,382,382,382');
karaoke.add('03:20.134', '03:36.604', '出品：亚伦影音工作室', '1647,1647,1647,1647,1647,1647,1647,1647,1647,1647');
karaoke.add('03:37.113', '03:40.941', '曾经真的以为人生就这样了', '319,319,319,319,319,319,319,319,319,319,319,319');
karaoke.add('03:41.450', '03:45.310', '平静的心拒绝再有浪潮', '386,386,386,386,386,386,386,386,386,386');
karaoke.add('03:45.812', '03:48.463', '斩了千次的情丝却断不了', '241,241,241,241,241,241,241,241,241,241,241');
karaoke.add('03:48.973', '03:52.960', '百转千折它将我围绕', '443,443,443,443,443,443,443,443,443');
karaoke.add('03:53.466', '03:56.227', '有人问我你究竟是哪里好', '251,251,251,251,251,251,251,251,251,251,251');
karaoke.add('03:56.731', '04:00.385', '这么多年我还忘不了', '406,406,406,406,406,406,406,406,406');
karaoke.add('04:00.885', '04:04.086', '春风再美也比不上你的笑', '291,291,291,291,291,291,291,291,291,291,291');
karaoke.add('04:04.594', '04:09.024', '没见过你的人不会明了', '443,443,443,443,443,443,443,443,443,443');
karaoke.add('04:09.531', '04:12.475', '是鬼迷了心窍也好', '368,368,368,368,368,368,368,368');
karaoke.add('04:12.980', '04:15.948', '是前世的因缘也好', '371,371,371,371,371,371,371,371');
karaoke.add('04:16.454', '04:19.734', '然而这一切已不再重要', '328,328,328,328,328,328,328,328,328,328');
karaoke.add('04:20.242', '04:23.992', '如果你能够重回我怀抱', '375,375,375,375,375,375,375,375,375,375');
karaoke.add('04:24.500', '04:27.892', '是命运的安排也好', '424,424,424,424,424,424,424,424');
karaoke.add('04:28.392', '04:31.155', '是你存心的捉弄也好', '307,307,307,307,307,307,307,307,307');
karaoke.add('04:31.657', '04:35.387', '然而这一切已不再重要', '373,373,373,373,373,373,373,373,373,373');
karaoke.add('04:35.889', '04:41.809', '我愿意随你到天涯海角', '592,592,592,592,592,592,592,592,592,592');
karaoke.add('04:42.315', '04:45.051', '虽然岁月总是匆匆的催人老', '228,228,228,228,228,228,228,228,228,228,228,228');
karaoke.add('04:45.554', '04:49.334', '虽然情爱总是让人烦恼', '378,378,378,378,378,378,378,378,378,378');
karaoke.add('04:49.838', '04:53.118', '虽然未来如何不能知道', '328,328,328,328,328,328,328,328,328,328');
karaoke.add('04:53.626', '04:57.306', '现在说再见会不会太早', '368,368,368,368,368,368,368,368,368,368');
karaoke.add('04:57.806', '05:00.623', '孙露 - 鬼迷心窍', '313,313,313,313,313,313,313,313,313');
karaoke.add('05:01.123', '05:02.947', '作词：李宗盛', '304,304,304,304,304,304');
karaoke.add('05:03.448', '05:05.296', '作曲：李宗盛', '308,308,308,308,308,308');
karaoke.add('05:05.799', '05:26.819', '出品：亚伦影音工作室', '2102,2102,2102,2102,2102,2102,2102,2102,2102,2102');
karaoke.add('05:27.324', '05:29.880', '曾经真的以为人生就这样了', '213,213,213,213,213,213,213,213,213,213,213,213');
karaoke.add('05:30.380', '05:33.550', '平静的心拒绝再有浪潮', '317,317,317,317,317,317,317,317,317,317');
karaoke.add('05:34.064', '05:37.682', '斩了千次的情丝却断不了', '330,330,330,330,330,330,330,330,330,330,330');
karaoke.add('05:38.191', '05:42.466', '百转千折它将我围绕', '475,475,475,475,475,475,475,475,475');
karaoke.add('05:42.971', '05:45.369', '有人问我你究竟是哪里好', '218,218,218,218,218,218,218,218,218,218,218');
karaoke.add('05:45.871', '05:49.363', '这么多年我还忘不了', '388,388,388,388,388,388,388,388,388');
karaoke.add('05:49.868', '05:53.146', '春风再美也比不上你的笑', '298,298,298,298,298,298,298,298,298,298,298');
karaoke.add('05:53.656', '05:57.746', '没见过你的人不会明了', '409,409,409,409,409,409,409,409,409,409');
karaoke.add('05:58.253', '05:59.917', '是鬼迷了心窍也好', '208,208,208,208,208,208,208,208');
karaoke.add('06:00.421', '06:04.517', '是前世的因缘也好', '512,512,512,512,512,512,512,512');
karaoke.add('06:05.019', '06:08.829', '然而这一切已不再重要', '381,381,381,381,381,381,381,381,381,381');
karaoke.add('06:09.329', '06:13.889', '如果你能够重回我怀抱', '456,456,456,456,456,456,456,456,456,456');
karaoke.add('06:14.397', '06:17.005', '是命运的安排也好', '326,326,326,326,326,326,326,326');
karaoke.add('06:17.505', '06:20.763', '是你存心的捉弄也好', '362,362,362,362,362,362,362,362,362');
karaoke.add('06:21.267', '06:24.627', '然而这一切已不再重要', '336,336,336,336,336,336,336,336,336,336');
karaoke.add('06:25.133', '06:30.453', '我愿意随你到天涯海角', '532,532,532,532,532,532,532,532,532,532');
karaoke.add('06:30.958', '06:34.270', '虽然岁月总是匆匆的催人老', '276,276,276,276,276,276,276,276,276,276,276,276');
karaoke.add('06:34.772', '06:38.862', '虽然情爱总是让人烦恼', '409,409,409,409,409,409,409,409,409,409');
karaoke.add('06:39.370', '06:42.100', '虽然未来如何不能知道', '273,273,273,273,273,273,273,273,273,273');
karaoke.add('06:42.609', '06:48.689', '现在说再见会不会太早', '608,608,608,608,608,608,608,608,608,608');
karaoke.add('06:49.192', '06:50.857', '孙露 - 鬼迷心窍', '185,185,185,185,185,185,185,185,185');
karaoke.add('06:51.360', '06:52.920', '作词：李宗盛', '260,260,260,260,260,260');
karaoke.add('06:53.424', '06:57.126', '作曲：李宗盛', '617,617,617,617,617,617');
karaoke.add('06:57.629', '07:02.869', '出品：亚伦影音工作室', '524,524,524,524,524,524,524,524,524,524');
karaoke.add('07:03.376', '07:07.003', '孙露 - 鬼迷心窍', '403,403,403,403,403,403,403,403,403');
karaoke.add('07:07.504', '00:00.004', '音乐合成：亚伦', '0,0,0,0,0,0,0');

`;
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);
</script>
<script>
bj.onclick = () => audio.paused ? (audio.play(), intro.style.animationPlayState = 'running') : (audio.pause(),intro.style.animationPlayState = 'paused');

const intro= document.querySelector('.intro');

    </script>

杨帆 发表于 2025-8-13 18:43

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

红影 发表于 2025-8-13 20:44

鼠标一动，就有很多的粒子散开来，真美。
这个帖子里的粒子是新的，更好看呢{:4_187:}

红影 发表于 2025-8-13 20:44

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

小辣椒 发表于 2025-8-13 21:55

亚纶这个帖做的很漂亮{:4_178:}

小辣椒 发表于 2025-8-13 22:02

纯代码的制作变色效果，粒子也是漂亮
小辣椒欣赏加学习~~~{:4_199:}

查看完整版本: 孙露 - 鬼迷心窍