套用马老师代码制作《当雪花爱上梅花》

霜染枫丹 发表于 2025-12-7 16:00

本帖最后由霜染枫丹于 2025-12-13 20:46 编辑 <br /><br />
<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>

杨帆发表于 2025-12-7 18:32

漂亮~谢谢枫丹精彩分享{:4_204:}

梦江南 发表于 2025-12-7 18:33

欣赏老师的精美音画制作。赞！

霜染枫丹 发表于 2025-12-7 19:59

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

红影发表于 2025-12-7 20:25

椭圆里的和外面的都是漂亮的梅花，相映成趣。非常漂亮的制作。
给枫丹点赞{:4_199:}

红影发表于 2025-12-7 20:27

非常温馨浪漫，很感人的温柔氛围{:4_187:}

霜染枫丹 发表于 2025-12-7 20:45

红影发表于 2025-12-7 20:25
椭圆里的和外面的都是漂亮的梅花，相映成趣。非常漂亮的制作。
给枫丹点赞

得到点赞太高兴了，在这里玩得很开心，谢谢红影，周末快乐！！{:4_204:}{:4_190:}

樵歌发表于 2025-12-7 21:06

雪花虽冷，可梅花暖人心哪{:4_204:}

樵歌发表于 2025-12-7 21:07

画面和歌词的意境曲调的情绪都完美的契合.大姐好手艺！{:4_190:}

樵歌发表于 2025-12-7 21:09

因歌而构思题材，又因画面为歌声情绪而增持！

霜染枫丹 发表于 2025-12-7 21:09

樵歌发表于 2025-12-7 21:06
雪花虽冷，可梅花暖人心哪

现在AI让我们随时都能看到梅花雪，小樵哥晚上好~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2025-12-7 21:14

樵歌发表于 2025-12-7 21:07
画面和歌词的意境曲调的情绪都完美的契合.大姐好手艺！

谢小樵哥的鼓励！马老师辛苦写出来的代码，实现起来得到的画面我很喜欢，就想学，不管画质如何，先对付着能有画面声音，在慢慢的理解。别处没有这样的好环境，做起来就有信心。{:4_204:}

霜染枫丹 发表于 2025-12-7 21:16

樵歌发表于 2025-12-7 21:09
因歌而构思题材，又因画面为歌声情绪而增持！

牛朝阳的这首歌我挺喜欢的，虽然算是老歌了，听起来还是很温馨。{:4_204:}{:4_190:}

杨帆发表于 2025-12-7 23:02

霜染枫丹发表于 2025-12-7 19:57
谢谢杨帆的鼓励！那个时间显示有点画蛇添足，字母的底色不好看，呵呵，先学着做吧，以后再管好看，很高兴 ...

时间显示不多余呀。一步一步来，延长、延迟幸福感{:4_204:}

霜染枫丹 发表于 2025-12-7 23:30

杨帆发表于 2025-12-7 23:02
时间显示不多余呀。一步一步来，延长、延迟幸福感

欠缺很多基本功，已经无法提高了，就照葫芦画瓢，把我玩的挺高兴{:4_204:}{:4_190:}

绿叶清舟 发表于 2025-12-8 12:22

漂亮的梅花，为啥俺叫AI就做不出好图来呢

霜染枫丹 发表于 2025-12-8 14:09

绿叶清舟发表于 2025-12-8 12:22
漂亮的梅花，为啥俺叫AI就做不出好图来呢

轻舟下午好！我一般用即梦平台，图片风格不一样我也不太清楚原因，不过平台能力是有差别的。{:4_204:}

杨帆发表于 2025-12-8 20:01

霜染枫丹发表于 2025-12-7 23:30
欠缺很多基本功，已经无法提高了，就照葫芦画瓢，把我玩的挺高兴

玩高兴就好，知识积累慢慢来{:4_187:}

小辣椒 发表于 2025-12-8 22:31

我没有看过黑黑老师这个教程，欣赏枫丹老师精彩的制作{:4_178:}

霜染枫丹 发表于 2025-12-8 22:38

小辣椒发表于 2025-12-8 22:31
我没有看过黑黑老师这个教程，欣赏枫丹老师精彩的制作

欢迎下辣椒！我自己不会写播放器代码，来到这里都是套用的马老师的代码，感谢您的支持，晚上好！{:4_204:}

页: [1] 2

花潮论坛's Archiver

套用马老师代码制作《当雪花爱上梅花》