我家在烟台 - 音画音乐🎶 - 数字音乐论坛 - Powered by Discuz! Archiver

怀旧金典 › 音画音乐🎶 › 我家在烟台

四季歌 发表于 5 天前

我家在烟台

<style>
#papa{position: relative;
         width: 1186px;
         height: 640px;
         margin-left:-180px;
         margin-top: 0px;
         overflow: hidden;z-index:12345;
         background:url('https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0_3b0f3137b702c8e65e8948efa94928ad.png')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 3s;
}
.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://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0_4fcb1b1f4ad433faaeee6da27d6de87a.mp4" loop muted autoplay=""></video>
   </p>
   <p class="zxx-slide-a">
      <video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0_4fcb1b1f4ad433faaeee6da27d6de87a.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
   <video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0%20(1)_e0384fbc748bf8ea2684886e685de19b.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
   <video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0%20(3)_56dbfb40584e1e0f74ed8648dcff5f80.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
      <video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0%20(2)_12955f16f3012e8f453205850fc1b2d9.mp4" loop muted autoplay=""></video></p>
   <p class="zxx-slide-a">
      <video class="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0_4fcb1b1f4ad433faaeee6da27d6de87a.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0%20(2)_12955f16f3012e8f453205850fc1b2d9.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0%20(3)_56dbfb40584e1e0f74ed8648dcff5f80.mp4" loop muted autoplay=""></video></p>

</div>
</zxx-slide>
<img id="mdiv"src="https://638183.freep.cn/638183/small/hxxb.webp">
<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://up.mediy.cn/%E6%88%91%E5%AE%B6%E5%9C%A8%E7%83%9F%E5%8F%B0_7a891277fc09596ae16dab2175d3a50c.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]

查看完整版本: 我家在烟台