快乐老高 - 音画音乐🎶 - 数字音乐论坛 - Powered by Discuz! Archiver

怀旧金典 › 音画音乐🎶 › 快乐老高

四季歌 发表于 7 天前

快乐老高

<style>
#papa{position: relative;
         width: 1186px;
         height: 640px;
         margin-left:-180px;
         margin-top: 0px;
         overflow: hidden;z-index:12345;
         background:url('https://mpimg.cn/view.php/117db11928ce58a411b84d994fe955ca.jpg')no-repeat center/cover;
   }
zxx-slide {display: block;
width: 100%; height:100%;
position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
position: absolute;bottom: 0px;
display: none;
}
.zxx-slide-a.in {
z-index: 1;
}
.zxx-slide-img { width: 100%;
height:100%;object-fit: cover; pointer-events: none;
display: block;}

.zxx-slide-index-x {
position: absolute;
left: 0px; right: 0; bottom: 0px;
text-align: center;
font-size: 0;
z-index: 1;
}

@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
-webkit-mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
-webkit-mask-size: 50px 50px;
mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 50px 50px;
animation: seed 1s;
}
.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;

   }

#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
</style>
<divid="papa">
<zxx-slide>
<div class="zxx-slide-x">
   <p class="zxx-slide-a">

      <video class="zxx-slide-img" src="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video>
   </p>
   <p class="zxx-slide-a">
      <video class="zxx-slide-img" src="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
   <video class="zxx-slide-img" src="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
   <video class="zxx-slide-img" src="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
      <video class="zxx-slide-img" src="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
      <video class="https://mpimg.cn/view.php/f5c1aa696164493fd6309493557617e2.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/4d035bab9011d256ba4383b4da80e524.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://pan.suyanw.cn/view.php/4d035bab9011d256ba4383b4da80e524.mp4" loop muted autoplay=""></video></p>

</div>
</zxx-slide>
<img id="mdiv"src="https://pic1.imgdb.cn/item/690c41ba3203f7be00db7fed.png">
<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://mpimg.cn/view.php/2695d026f0fd62cb267f88cc39cd2f88.mp3"loopautoplay controlslist="nodownload"></audio>
<script>
mdiv.onclick = () => audio.paused ? audio.play(): audio.pause();
audio.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
audio.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

mdiv.style.animationPlayState = audio.paused ? 'paused' : 'running';

(function() {
   const vids = document.querySelectorAll('.zxx-slide-img');
   var mState = () => {
      vids.forEach(vid => audio.paused ? vid.pause(): vid.play() );
   };
audio.onplaying = audio.onpause = () => mState();
})();

</script>

<script>
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function () {
clearTimeout(timerSlide);funSlide();
});

var eleSlides = [].slice.call(container.querySelectorAll('p'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));
var funSlide = function() {
eleSlides.forEach(function (slide, index) { if(!audio.paused){
if (indexSlide == index) {
slide.classList.add('in');
slide.style.display = 'block';
} else if (slide.classList.contains('in')) {
slide.classList.remove('in');
}}
});
eleButtons.forEach(function (button, index) {
button.classList.remove('active');
if (indexSlide == index) {
button.classList.add('active');
}
});

timerSlide = setTimeout(function () {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 8000);
}

indexSlide++;

setTimeout(funSlide, 96);
});

</script>

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

</script>

页: [1]

查看完整版本: 快乐老高