论坛 › AI创作交流 › 一路花开

霜染枫丹 发表于 2026-5-23 20:05

一路花开

本帖最后由 霜染枫丹 于 2026-5-23 20:14 编辑

一路花开

歌手:姜万山（烟嗓版）

春风吹过来 烦恼都抛开

脚步轻轻踩 心事不用猜

花儿沿路开 好运迎面来

心有欢喜在 笑容满心怀

把烦恼交给春风

愿你一路花开

满心皆是欢喜

吉祥伴常在

把烦恼交给春风

踏歌向未来

吉祥伴着你我

快乐跳起来

雪山映云彩 歌声飘天外

舞步多自在 烦恼都散开

岁月多慷慨 温柔入心怀

一路花盛开 喜乐常安排

把烦恼交给春风

愿你一路花开

满心皆是欢喜

吉祥伴常在

把烦恼交给春风

踏歌向未来

吉祥伴着你我

快乐跳起来

一路花开满心欢喜

吉祥如意   岁岁平安

霜染枫丹 发表于 2026-5-23 20:13

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {
      --offsetX: 81px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/05/23/6a119255664c2.gif') no-repeat center/cover;
    }
    /* 图片播放按钮 */
    .play-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 20%;
      height: 20%;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s ease;
      overflow: hidden;
    }
    .play-btn:hover {
      transform: translateX(-50%) scale(1.15);

    }
    .play-img {
      width: 65%;
      height: 65%;
      object-fit: contain;
      pointer-events: none;
    }

    /* 椭圆遮罩样式 */
    .pd-vid {
      opacity: 1;
      --ellipse-w: 15%;
      --ellipse-h: 20%;
      --ellipse-x:80%;
      --ellipse-y: 50%;
      clip-path: ellipse(var(--ellipse-w) var(--ellipse-h) at var(--ellipse-x) var(--ellipse-y));
      cursor: move;
      position: relative;
    }
    @keyframes flash {
      from { opacity: 1; }
      to { opacity: 0.7; }
    }
    /* 旋转动画 */
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 播放状态下的旋转效果 */
    .play-img.playing {
      animation: rotate 8s linear infinite;
    }

    /* 歌词显示样式：右侧竖式显示 */
    .lyrics-container {
      position: absolute;
      top: 40%;
      right: 20px;
      transform: translateY(-50%);
      width: auto;
      text-align: center;
      z-index: 99;
      pointer-events: none;
      padding: 10px 20px;
      border-radius: 10px;
      max-height: 80vh;
      overflow-y: auto;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
    .lyrics-text {
      font-size: 36px;
      color: #ef5b9c;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
      font-family: "LiSu", "隶书", serif;
      margin: 0 4px;
      line-height: 1.2;
      white-space: pre-line;
      overflow-wrap: break-word;
    }
    /* 隐藏原生音频播放条 */
    audio {
      display: none !important;
    }
</style>

<div id="pa" class="pa">
    <div class="lyrics-container">
      <div id="lyrics-text" class="lyrics-text"></div>
    </div>
    <div id="playBtn" class="play-btn">
      <img src="https://ff.xiaoqiaodali.top:5401/i/2026/05/16/6a08360e4889f.png" class="play-img">
    </div>
</div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');

    const audioEl = tz.add('audio', '', '', {
      src: 'http://cccimg.com/view.php/3befcfd685ab53e5b7fbf874a4ed1f55.mp3'
    });
    const audio = audioEl.el || document.querySelector('audio');

    const videoEl = tz.add('video', 'http://cccimg.com/view.php/3e8ea5a337c2db1ae322937e2c90d16d.mp4', 'pd-vid', {
      src: '',
      autoplay: true,
      muted: true,
      loop: true
    });

    tz.bgprog().style('width: 380px; bottom: 20px; color: cyan');
    tz.fs().style('top: 30px');

    const playBtn = document.getElementById('playBtn');
    const lyricsText = document.getElementById('lyrics-text');
    const playImg = document.querySelector('.play-img');

    // —————— 核心修改：页面加载后自动播放音乐 + 自动旋转 ——————
    window.addEventListener('load', () => {
      audio.muted = false;
      audio.play().then(() => {
            playImg.classList.add('playing'); // 同步旋转
            lyricsText.textContent = lyrics;
      }).catch(err => {
            lyricsText.textContent = '点击图标播放音乐';
      });
    });

    // 点击按钮切换播放/暂停 + 旋转/停止
    playBtn.addEventListener('click', () => {
      if (audio.paused) {
            audio.play();
            playImg.classList.add('playing');
      } else {
            audio.pause();
            playImg.classList.remove('playing');
      }
    });

const lrcString = `
一路花开
歌手:姜万山
春风吹过来 烦恼都抛开
脚步轻轻踩 心事不用猜
花儿沿路开 好运迎面来
心有欢喜在 笑容满心怀
把烦恼交给春风
愿你一路花开
满心皆是欢喜
吉祥伴常在
把烦恼交给春风
踏歌向未来
吉祥伴着你我
快乐跳起来
雪山映云彩 歌声飘天外
舞步多自在 烦恼都散开
岁月多慷慨 温柔入心怀
一路花盛开 喜乐常安排
把烦恼交给春风
愿你一路花开
满心皆是欢喜
吉祥伴常在
把烦恼交给春风
踏歌向未来
吉祥伴着你我
快乐跳起来
一路花开满心欢喜
吉祥如意   岁岁平安
`;

function parseLRC(lrcText) {
    const lines = lrcText.split('\n');
    const lyricsArray = [];
    const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2})\]/;

    for (let line of lines) {
      const match = line.match(timeRegex);
      if (match) {
            const minutes = parseInt(match);
            const seconds = parseInt(match);
            const centiseconds = parseInt(match);
            const timeInSeconds = minutes * 60 + seconds + centiseconds / 100;
            const text = line.replace(timeRegex, '').trim();
            if (text) {
                lyricsArray.push();
            }
      }
    }
    return lyricsArray;
}

const lyrics = parseLRC(lrcString);
let currentLyricIndex = 0;

audio.addEventListener('timeupdate', () => {
    const currentTime = audio.currentTime;
    for (let i = lyrics.length - 1; i >= 0; i--) {
      if (currentTime >= lyrics) {
            if (currentLyricIndex !== i) {
                currentLyricIndex = i;
                lyricsText.textContent = lyrics;
            }
            break;
      }
    }
});

audio.addEventListener('ended', () => {
    lyricsText.textContent = '播放结束';
    playImg.classList.remove('playing');
});



    const vidElement = document.querySelector('.pd-vid');
    let isDragging = false;
    let startX, startY;
    let startEllipseX, startEllipseY;

    vidElement.addEventListener('mousedown', (e) => {
      isDragging = true;
      startX = e.clientX;

      startEllipseX = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-x'));

      vidElement.style.userSelect = 'none';

    });

    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const deltaX = (e.clientX - startX) / vidElement.offsetWidth * 100;

      const newX = Math.max(0, Math.min(100, startEllipseX + deltaX));

      vidElement.style.setProperty('--ellipse-x', `${newX}%`);

    });

    document.addEventListener('mouseup', () => {
      isDragging = false;
      vidElement.style.userSelect = '';

    });

    vidElement.addEventListener('wheel', (e) => {
      e.preventDefault();
      let ellipseW = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-w'));

      const step = e.deltaY > 0 ? -2 : 2;
      const newW = Math.max(10, Math.min(100, ellipseW + step));

      vidElement.style.setProperty('--ellipse-w', `${newW}%`);

    }, { passive: false });
</script>

梦江南 发表于 2026-5-23 20:19

这首歌很好听，版主的音画做得很漂亮。赞了！{:4_199:}

霜染枫丹 发表于 2026-5-23 20:26

梦江南 发表于 2026-5-23 20:19
这首歌很好听，版主的音画做得很漂亮。赞了！

梦江南晚上好~~

我是做那个轮播图制作了歌词，也上传了歌曲，挺遗憾的轮播图没成功，别浪费了，做个播放器吧。{:4_173:}
这首歌我挺喜欢听的，很高兴您也喜欢。谢谢支持！！祝您夏安~~{:4_204:}{:4_190:}

杨帆 发表于 2026-5-23 21:06

耳目一新，好听好看，欣赏学习，谢谢枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-5-23 21:10

杨帆 发表于 2026-5-23 21:06
耳目一新，好听好看，欣赏学习，谢谢枫丹老师精彩分享

杨帆晚上好~~欢迎您！

这首歌有好几个版本，我最喜欢听的是苦乐人生唱的，，没找到视频，就下载了这个烟嗓版的。
感谢您的支持，恭祝夏安~~{:4_204:}{:4_190:}

红影 发表于 2026-5-23 21:15

歌曲很洒脱开怀，如此一路花开，满是欢喜。
欣赏枫丹好帖{:4_187:}

梦油 发表于 2026-5-23 21:46

霜染枫丹 发表于 2026-5-23 20:13
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {
      --offsetX: 81p ...

画面设计很美。

也曾年轻 发表于 2026-5-23 21:56

霜染枫丹 发表于 2026-5-23 20:13
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {
      --offsetX: 81p ...

https://pic.rmb.bdstatic.com/bjh/news/0f8fb2d0d0d88463736f934ebf02a490.gif

魏淑芬 发表于 2026-5-24 14:21

https://q0.itc.cn/q_70/images03/20250126/977712507b08412cbc336e02e92afea1.gif

霜染枫丹 发表于 2026-5-24 14:38

红影 发表于 2026-5-23 21:15
歌曲很洒脱开怀，如此一路花开，满是欢喜。
欣赏枫丹好帖

红影下午好~~

我是来到这里学会的制作播放器，很高兴使用这种方式来抒发自己的心情。感谢您的支持，祝您夏安！！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-24 14:42

梦油 发表于 2026-5-23 21:46
画面设计很美。

梦老下午好~~

感谢您的支持！桑榆路上，让我们饱览每一站风景，花开在路上，美在心里，祝您夏安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-24 14:44

也曾年轻 发表于 2026-5-23 21:56


也曾年轻下午好~~您的点赞让我荣幸，谢谢您！祝您夏安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-24 14:46

魏淑芬 发表于 2026-5-24 14:21


魏淑芬下午好~~昨天想做个适合相机照片使用的轮播图，用的这首歌。轮播图没成功，就做了播放器。感谢您的支持，恭祝夏安~~{:4_204:}{:4_190:}

梦油 发表于 2026-5-24 16:52

霜染枫丹 发表于 2026-5-24 14:42
梦老下午好~~

感谢您的支持！桑榆路上，让我们饱览每一站风景，花开在路上，美在心里，祝您夏安~~{:4_ ...

谢谢枫丹朋友。{:5_108:}

红影 发表于 2026-5-24 21:33

霜染枫丹 发表于 2026-5-24 14:38
红影下午好~~

我是来到这里学会的制作播放器，很高兴使用这种方式来抒发自己的心情。感谢您的支持，祝 ...

是的，这种方式能很好地抒发情感，特别好呢{:4_204:}

查看完整版本: 一路花开