醉美水芙蓉 发表于 2026-5-8 19:49:06

【水芙蓉播放器】就让岁月开成一朵花

<meta charset="utf-8">
<style>
#papa{position: relative;
            width: 1186px;
            height: 640px;
            margin-left:-50px;
            margin-top: 0px;
            overflow: hidden;z-index:12345;
            background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2dabe37d35f3f21c585f573d7faa83a_preview.webp)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://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/faacb5a448fd92f91ed930b8fa16f25b_preview.mp4" loop muted autoplay=""></video>
      </p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2dabe37d35f3f21c585f573d7faa83a_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
       <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4177c647558d2739e6b6d06f4cf7771c_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
       <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c098757b3f1cf3d52dbac7ea87ee056_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a6fc28f10c6c4e661d72f4c1169c2583_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b65fec1889f678ce9fc2e6280e7909c2_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/afdf16c7d4e8878a278c85c93cb1d4f8_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5a3e8c2eb81c6cf2bcd62dd32fe28edd_preview.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/79480c7cd90238b176576ebef4623412.mp3"loopautoplay ></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();
        });
        container.addEventListener('mouseout', 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();
                }, 10000);
        }
       
        indexSlide++;

        setTimeout(funSlide, 48);
});

</script>

<script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `就让岁月开成一朵花（深情版）
词曲：祝你发
演唱：福音姐
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>

绿蔷薇 发表于 2026-5-8 20:33:26

撒花花
芙蓉周末哈皮
{:9_269:}

醉美水芙蓉 发表于 2026-5-8 20:34:27

绿蔷薇 发表于 2026-5-8 20:33
撒花花
芙蓉周末哈皮

祝蔷薇友友周末愉快！

绿蔷薇 发表于 2026-5-8 20:36:53

好治愈的一首歌曲
心有暖阳 岁月就能生花

绿蔷薇 发表于 2026-5-8 20:39:28

这不仅仅是播放器制作了
还加持了动画，好多动态画面哈
转页流畅，同步歌词漂亮又精准
{:9_280:}

绿蔷薇 发表于 2026-5-8 20:40:28

谢谢水芙蓉带来的视听觉盛宴，棒棒哒~~{:6_174:}

绿蔷薇 发表于 2026-5-8 20:40:58

醉美水芙蓉 发表于 2026-5-8 20:34
祝蔷薇友友周末愉快！

周末我们一起嗨匹哈~~

云端漫步 发表于 2026-5-8 22:07:44

芙蓉播放器作品的精妙之处，将画面、音效与文化内涵描绘得淋漓尽致。

欧阳风刀 发表于 2026-5-8 22:52:23

特效精彩，转场流畅自然，所选音乐动听。

欧阳风刀 发表于 2026-5-8 22:52:41

感谢水芙蓉精心制作分享！
页: [1] 2 3
查看完整版本: 【水芙蓉播放器】就让岁月开成一朵花