论坛 › 欢乐水吧 › 假如世界没有你/演唱：马健涛

亚伦影音工作室 发表于 2025-9-27 10:09

假如世界没有你/演唱：马健涛

本帖最后由 亚伦影音工作室 于 2025-11-14 09:14 编辑 <br /><br /><style>
.blackhole {margin: 10px-300px ;
    position: relative;
    width: 1286px;
    height: 700px;
   
    background:#222 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/939ab19eefec994600f8818b05380401.jpg) no-repeat center / cover;
    overflow: hidden;--state: running;
}

#dt{position: absolute;top:0%; left:0%;
        width: 100%;
        height: 100%;z-index: 3; }

#dt img{
        width: 100%;
        height: 100%;}


#qmsvg{ position: absolute;z-index: 8;
      left: 8%;cursor: pointer;
      top: 10%;
       animation: rot 10s linear infinite var(--state);
}
@keyframes rot {to { transform: rotate(-360deg);filter: hue-rotate(360deg); }}

#msvg{position: absolute;background:#0000; top: 14%;left: 6%;width:20%;height:20%;z-index: 2;animation: move 6s linear infinite var(--state);z-index: 8;cursor: pointer;}
@keyframes move {
                to { transform: rotate(360deg);filter: hue-rotate(360deg); }
        }
.lyrics{margin: 0;
            top: 90%;
            left: 50%;
    transform: translate(-50%, -50%);
            height: 100px; /* 调整高度，只容纳当前歌词 */
                 text-align: center;
            position: absolute;z-index: 10;
      }
            .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;
            
      }   
#mypic {top:50%; left:80%;z-index: 6;
display: block;position: absolute;cursor: pointer;
    width: 200px; height: 200px;
    background: url(https://pic1.imgdb.cn/item/68bedc4158cb8da5c8893fd7.png)no-repeat 0 0/2600px 200px;
animation: heart-burst steps(13) 1s infinite var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -2600px 0;}
}
#mpic {top:35%; left:7%;z-index: 6;
display: block;position: absolute;cursor: pointer;
    width: 260px; height: 360px;
    background: url(https://pic1.imgdb.cn/item/68cea8b1c5157e1a88207bd8.png)no-repeat 0px 0/6240px 360px;
animation: burst steps(24) 2s infinite var(--state);
}
@keyframes burst {
0% {background-position: -10px 0;}
100% {background-position: -6240px 0;}
}

#mapic {top:25%; left:47%;z-index: 6;
display: block;position: absolute;cursor: pointer;
    width: 260px; height: 360px;transform: rotateY(180deg);filter: hue-rotate(60deg);
    background: url(https://pic1.imgdb.cn/item/68cea8b1c5157e1a88207bd8.png)no-repeat 0px 0/6240px 360px;
animation: bur steps(24) 3s infinite var(--state);
}
@keyframes bur {
0% {background-position: -10px 0;}
100% {background-position: -6240px 0;}
}
#fullscreen {
    opacity: 1;
    position: absolute;
    width: 40px;
    height: 40px;
    top:5%;
    cursor: pointer;
    left: 90%;filter:invert(80%) hue-rotate(130deg);
    z-index: 40;
}


#全屏 {
    width: 40px;
    height: 40px;
    position: absolute;
   
    background: url(https://xlaj.cn/upfile/2025/01/15/dak.png)no-repeat center/cover;
}

#退出 {
    width: 40px;
    height: 40px;
    position: absolute;
    opacity: 0;
    background: url(https://xlaj.cn/upfile/2025/01/15/tz.png)no-repeat center/cover;
}

        </style>
<div class="blackhole">
<div id='dt'><img id="testImg" src="https://pic1.imgdb.cn/item/68c28cba58cb8da5c89c822c.gif" ></div>
<div>
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<svgid="qmsvg"width="200" height="200">

        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
        </text>
</svg>
</div>
<div id="mypic" ></div>
<div id="mpic" ></div>
<div id="mapic" ></div>
<div class="lyrics" >
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
    <div id="退出"></div>
</span>
</div>
<audio id="aud" src="https://www.dda5.com/plug/down.php?ac=mp3&amp;id=1b9b98de498049248cf4be5d87e409d8&amp;.mp3" loop autoplay></audio>
<script type="module">
        import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
        var dr = Dr.dr(msvg);
       
        var total = 7; // 绘制图案总数
        var points = '200 200,160 65,200 10,240 65,200 200'; // 图案数据

        // 绘制 total 个图案
        Array.from({length: total}).forEach((_,k) => {
                dr.polygon(points, 'none', 'teal', 3).transform(`rotate(${360 / total * k}, 200 200)`);
        });
</script>
<script>
mapic .onclick =mpic .onclick =mypic .onclick =qmsvg.onclick =msvg.onclick = () => aud.paused ? aud.play() : aud.pause();
        mState = () => blackhole.style.setProperty('--state',aud.paused ? 'paused' : 'running');
aud.onplaying = aud.onpause = () => mState();

(function(){
let mState = () => aud.paused ? image.stop():image.play();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs= true;
fullscreen.onclick = () => {
      fs ? (blackhole.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
const blackhole= document.querySelector('.blackhole');
</script>
<script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `假如世界没有你/演唱：马健涛
假如这世界没有了你
我活着有什么意义
假如有一天找不到你
我哭的比谁都委屈
假如你厌倦了别离
我等着你的归期
假如生命中没有了你
我的心情不会美丽
假如这世界没有你
什么都提不起兴趣
假如有一天又见到了你
幸福的会把眼泪滴
假如你爱情不如意
我该不该靠近你
假如你生活不如意
欢迎回到我这里
假如你厌倦了别离
我等着你的归期
假如生命中没有了你
我的心情不会美丽
假如这世界没有你
什么都提不起兴趣
假如有一天又见到了你
幸福的会把眼泪滴
假如你爱情不如意
我该不该靠近你
假如你生活不如意
欢迎回到我这里
假如这世界没有你
什么都提不起兴趣
假如有一天又见到了你
幸福的会把眼泪滴
假如你爱情不如意
我该不该靠近你
假如你生活不如意
欢迎回到我这里
欢迎回到我这里

`;

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


<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image = document.getElementById("testImg");
</script>

老谟深虑 发表于 2025-9-27 16:56

         欣赏老师的精美音画，点赞！

小辣椒 发表于 2025-9-27 22:26

亚纶这个动图背景可以一键停止了，只是那些png的动图我感觉做起来很烦，没有我自己那种做速度快，所以一直没有玩，我感觉只要动图和音乐同时一键停止就很好了，也是可以轻松玩，亚纶的精益求精的精神真的好棒！现在这个很完美了{:4_178:}

小辣椒 发表于 2025-9-27 22:27

那个全屏欣赏，播放器出来位置不对了，还是不要了好

查看完整版本: 假如世界没有你/演唱：马健涛