澜天 发表于 2025-11-26 19:46

霜染枫丹 发表于 2025-11-19 19:40
就是饱暖生闲事，漫漫长夜很适合作图。

谢红影支持，晚上好

以为这里还没有几个帖子
就不常来看
10月底新开版面
我可是第一个抢着发了个帖子
樵歌没赶上
{:4_189:}

澜天 发表于 2025-11-26 19:47

霜染枫丹 发表于 2025-11-19 19:40
就是饱暖生闲事，漫漫长夜很适合作图。

谢红影支持，晚上好

你这作品
跟这里非常契合啊
花潮急你所急
开了这个版面
原来冥冥之中
早有安排
{:4_178:}

霜染枫丹 发表于 2025-11-26 19:54

澜天 发表于 2025-11-26 19:47
你这作品
跟这里非常契合啊
花潮急你所急


哈哈！~这也是缘分

我过来一看就很喜欢。
小樵哥的远见让我很佩服
AI是个新事物
逐步会被大家利用
我就在这里认真的玩了{:4_204:}{:4_190:}

澜天 发表于 2025-11-27 13:58

霜染枫丹 发表于 2025-11-26 19:54
哈哈！~这也是缘分

我过来一看就很喜欢。


终于找到组织了
{:4_178:}

霜染枫丹 发表于 2025-12-13 02:21

本帖最后由 霜染枫丹 于 2025-12-13 02:27 编辑 <br /><br />{:4_204:} {:4_204:}



霜染枫丹 发表于 2025-12-13 02:27


<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {
      --offsetX: 81px;
      --bg: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693c5dc1e2a42.png') no-repeat center/cover;
      position: relative;
      height: 100vh;
      overflow: hidden;
    }

    /* 歌词容器样式 */
    .lyrics-container {
      position: absolute;
      bottom: 120px; /* 在进度条上方 */
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 1000;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .lyrics-line {
      display: inline-block;
      color: #009ad6;
      font-size: 18px;
      font-weight: 500;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
      background-color: rgba(0, 0, 0, 0.5);
      padding: 8px 20px;
      border-radius: 25px;
      backdrop-filter: blur(5px);
      max-width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s ease;
    }

    /* 进度条容器 */
    .progress-container {
      position: absolute;
      bottom: 70px; /* 在播放按钮上方 */
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      max-width: 600px;
      height: 6px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      overflow: hidden;
      z-index: 1000;
      cursor: pointer;
    }

    /* 进度条 */
    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      border-radius: 3px;
      transition: width 0.1s linear;
    }

    /* 时间显示 */
    .time-display {
      position: absolute;
      bottom: 45px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 14px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      width: 80%;
      max-width: 600px;
      padding: 0 5px;
      box-sizing: border-box;
    }

    .current-time, .duration {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 2px 8px;
      border-radius: 10px;
    }
</style>

<div class="pa"></div>

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

    // 添加音频
    const audio = tz.add('audio', '', '', {src: 'https://wl.nn717888.cn/view.php/ee4e972a9d50c77bc90e974616e4fb80.mp3'});

    // 背景视频 - 透明度较低
    tz.add('video', '', 'pd-vid', {
      src: 'https://img.tukuppt.com/video_show/2418175/00/02/06/5b500992e3bae.mp4',
      style: 'opacity: 0.15;'// 背景视频保持模糊
    });

    // 创建椭圆容器
    tz.add('div', 'wrapper', 'wrap300 invert', {
      style: 'clip-path: ellipse(50% 40%); opacity: 0.9;'
    });

    // 小椭圆内的视频 - 增加不透明度使其更清晰
    tz.add('video', '', 'pd-vid', {
      src: 'https://wl.nn717888.cn/view.php/e482b39ce50076ea1f06401b20e66f2d.mp4',
      style: 'opacity: 0.9 !important;'// 这里设置不透明度，使其更清晰
    }).to('wrapper');

    // 播放按钮
    const playBtn = tz.add('img', '', 'rotate-ani', {
      src: 'https://638183.freep.cn/638183/small/ytji.png',
      alt: '',
      style: `
            position: absolute;
            width: 130px;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            z-index: 999;
      `
    }).playmp3();

    tz.fs().style('bottom: 20px');

    // 添加歌词容器
    const lyricsContainer = document.createElement('div');
    lyricsContainer.className = 'lyrics-container';
    lyricsContainer.innerHTML = '<div class="lyrics-line">歌词加载中...</div>';
    document.querySelector('.pa').appendChild(lyricsContainer);

    // 添加进度条容器
    const progressContainer = document.createElement('div');
    progressContainer.className = 'progress-container';
    progressContainer.innerHTML = '<div class="progress-bar"></div>';
    document.querySelector('.pa').appendChild(progressContainer);

    // 添加时间显示
    const timeDisplay = document.createElement('div');
    timeDisplay.className = 'time-display';
    timeDisplay.innerHTML = '<span class="current-time">0:00</span><span class="duration">0:00</span>';
    document.querySelector('.pa').appendChild(timeDisplay);

    // 获取DOM元素
    const lyricsLine = document.querySelector('.lyrics-line');
    const progressBar = document.querySelector('.progress-bar');
    const currentTimeEl = document.querySelector('.current-time');
    const durationEl = document.querySelector('.duration');

    // 示例歌词数据（实际使用时可以从API获取）
    const lyrics = [
      { time: 0, text: "音乐播放器" },
    { "time": 7.30, "text": "当雪花爱上梅花" },
    { "time": 11.72, "text": "歌手 牛朝阳" },
    { "time": 14.17, "text": "作词：牛朝阳" },
    { "time": 17.78, "text": "作曲：牛朝阳" },
    { "time": 25.87, "text": "我是一片雪花" },
    { "time": 30.15, "text": "而你是一朵梅花" },
    { "time": 34.60, "text": "我离开苍茫遥远的天空" },
    { "time": 39.60, "text": "为你飞舞飘下" },
    { "time": 44.13, "text": "我心晶莹无暇" },
    { "time": 48.67, "text": "独爱你红尘奇葩" },
    { "time": 53.41, "text": "那一朵风中摇摆的娇艳" },
    { "time": 58.14, "text": "是我追寻的梦啊" },
    { "time": 63.74, "text": "我为你飘洒" },
    { "time": 70.20, "text": "你为我开花" },
    { "time": 73.71, "text": "迎着萧萧北风" },
    { "time": 75.91, "text": "吻你红红脸庞" },
    { "time": 78.24, "text": "一缕幽香暖天涯" },
    { "time": 84.10, "text": "我为你飘洒" },
    { "time": 88.65, "text": "你为我开花" },
    { "time": 92.11, "text": "此生有此一刻" },
    { "time": 94.41, "text": "与你相依相偎" },
    { "time": 96.75, "text": "何惧阳光来融化" },
    { "time": 120.53, "text": "我是一片雪花" },
    { "time": 124.75, "text": "而你是一朵梅花" },
    { "time": 129.51, "text": "我离开苍茫遥远的天空" },
    { "time": 134.21, "text": "为你飞舞飘下" },
    { "time": 138.81, "text": "我心晶莹无暇" },
    { "time": 143.43, "text": "独爱你红尘奇葩" },
    { "time": 148.04, "text": "那一朵风中摇摆的娇艳" },
    { "time": 152.55, "text": "是我追寻的梦啊" },
    { "time": 160.41, "text": "我为你飘洒" },
    { "time": 164.77, "text": "你为我开花" },
    { "time": 168.27, "text": "迎着萧萧北风" },
    { "time": 170.56, "text": "吻你红红脸庞" },
    { "time": 172.83, "text": "一缕幽香暖天涯" },
    { "time": 179.12, "text": "我为你飘洒" },
    { "time": 183.21, "text": "你为我开花" },
    { "time": 186.77, "text": "此生有此一刻" },
    { "time": 188.96, "text": "与你相依相偎" },
    { "time": 191.26, "text": "何惧阳光来融化" },
    { "time": 197.55, "text": "我为你飘洒" },
    { "time": 201.72, "text": "你为我开花" },
    { "time": 205.39, "text": "此生有此一刻" },
    { "time": 207.46, "text": "与你相依相偎" },
    { "time": 209.73, "text": "何惧阳光来融化" },
    { "time": 214.44, "text": "此生有此一刻" },
    { "time": 216.71, "text": "与你相依相偎" },
    { "time": 219.02, "text": "何惧阳光来融化" }
    ];

    // 获取音频元素
    const audioElement = document.querySelector('audio');

    // 更新进度条和时间显示
    audioElement.addEventListener('timeupdate', function() {
      // 更新进度条
      const progress = (audioElement.currentTime / audioElement.duration) * 100;
      progressBar.style.width = progress + '%';

      // 更新时间显示
      currentTimeEl.textContent = formatTime(audioElement.currentTime);

      // 更新歌词
      updateLyrics(audioElement.currentTime);
    });

    // 点击进度条跳转播放位置
    progressContainer.addEventListener('click', function(e) {
      const rect = this.getBoundingClientRect();
      const clickPosition = (e.clientX - rect.left) / rect.width;
      audioElement.currentTime = clickPosition * audioElement.duration;
    });

    // 音频加载完成时更新总时长
    audioElement.addEventListener('loadedmetadata', function() {
      durationEl.textContent = formatTime(audioElement.duration);
    });

    // 格式化时间显示
    function formatTime(seconds) {
      if (isNaN(seconds)) return "0:00";

      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    }

    // 更新歌词显示
    function updateLyrics(currentTime) {
      let currentLyric = "歌曲播放中";

      // 查找当前时间对应的歌词
      for (let i = lyrics.length - 1; i >= 0; i--) {
            if (currentTime >= lyrics.time) {
                currentLyric = lyrics.text;
                break;
            }
      }

      // 更新歌词显示
      lyricsLine.textContent = currentLyric;

      // 添加歌词高亮效果
      if (currentLyric !== lyricsLine.dataset.lastLyric) {
            lyricsLine.dataset.lastLyric = currentLyric;
            lyricsLine.style.transform = 'scale(1.05)';
            lyricsLine.style.color = '#ff4444';

            setTimeout(() => {
                lyricsLine.style.transform = 'scale(1)';
                lyricsLine.style.color = 'white';
            }, 300);
      }
    }

    // 初始化歌词
    updateLyrics(0);
</script>
页: 1 [2]
查看完整版本: 秋颂 AI图片 原创文字