套用马老师代码制作新歌《岁月的记忆》

霜染枫丹 发表于 2025-12-4 08:30

本帖最后由霜染枫丹于 2025-12-12 19:34 编辑 <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/12/693bf312142b1.gif') no-repeat center/cover; }
.fadeInLrc { top: 30px; animation: fadeIn .2s forwards, flash 1s infinite alternate var(--state); }

/* 添加播放器按钮样式 - 底部居中定位 */
.ma {
   position: fixed !important;
   left: 50% !important;
   bottom: 20px !important;
   transform: translateX(-50%) !important;
   z-index: 1000;
}

/* 确保按钮大小合适 */
.ma img {
   width: 60px !important;
   height: 60px !important;
   cursor: pointer;
   transition: transform 0.3s;
   /* 移除之前的transform，避免冲突 */
}

.ma img:hover {
   transform: translateX(-50%) scale(1.1);
}

}
</style>

<div id="pa" 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 gc = `岁月的记忆\n
歌手:梁佳玉\n
发行日期:2025-10-11\n
我静静聆听岁月的旋律\n
在悠扬的影步中回忆往昔\n
我微微睁开深邃的眼眸\n
在时光的流淌中感慨流逝\n
我缓缓走向记忆的深处\n
在斑驳的痕迹中找寻当初\n
我轻轻抚摸泛黄的照片\n
在定格的瞬间中泪湿双目\n
就算岁月染白了我的发须\n
我依然热爱生活充满朝气\n
就算时光暗淡了我的眼眸\n
我依然期待明天神采奕奕\n
欢走向记忆的深处\n
在斑驳的痕迹中找寻当初\n
我轻轻抚摸泛黄的照片\n
在定格的瞬间中泪湿双目\n
就算岁月染白了\n
我的发絮\n
我依然热爱生活充满朝气\n
就算时光暗淡了\n
我的眼眸\n
我依然期待明天神采奕奕\n
就算岁月模糊了\n
我的记忆\n
我依然怀念青春美好天地\n
就算时光蹉跎了\n
我的脚步\n
我依然牵手爱人共赏落日\n
就算岁月染白了我的发须\n
我依然热爱生活充满朝气\n
就算时光慢淡了\n
我的眼眸\n
我依然期待明天身在意义\n
就算岁月模糊了我的记忆\n
我依然怀念青春美好点滴\n
就算时光蹉跎了\n
我的脚步\n
我依然牵手爱人共赏落日\n
`;
const gcAr = tz.lrc2HC(gc, -0.1); //skip
tz.add('audio', '', '', {
   src: 'https://wl.nn717888.cn/view.php/8f900d2bf4b3c0f60ec8dd180960da2d.mp3'
});

// 添加播放器按钮并应用新样式
const playerBtn = tz.add('img', 'player', 'ma', {
   src: 'https://ff.xiaoqiaodali.top:5401/i/2025/12/12/693bfcfa75010.png',
   alt: ''
});
playerBtn.playmp3();

// 应用底部居中样式到播放器按钮
const btnElement = document.querySelector('.ma img');
if(btnElement) {
   // 先移除可能存在的样式冲突
   btnElement.style.transform = 'translateX(-50%)';

   // 获取音频元素，监听播放/暂停状态
   const audio = document.querySelector('audio');

   // 播放时添加旋转类，暂停时移除
   audio.addEventListener('play', () => {
         btnElement.classList.add('playing');
   });

   audio.addEventListener('pause', () => {
         btnElement.classList.remove('playing');
   });

   // 点击按钮切换播放/暂停（保持原有功能）
   btnElement.addEventListener('click', () => {
         if(audio.paused) {
            audio.play();
         } else {
            audio.pause();
         }
   });

   // 初始状态检查
   if(!audio.paused) {
         btnElement.classList.add('playing');
   }
}

tz.bgprog().style('bottom: 10px; color: snow');
tz.lrc(gcAr, 'lrc', true);
tz.fs().style('right: 20px; bottom: 20px');
</script>

偶然~ 发表于 2025-12-4 09:15

来欣赏霜染枫丹精品佳作！

偶然~ 发表于 2025-12-4 09:15

音画唯美

偶然~ 发表于 2025-12-4 09:15

背景歌曲动听

偶然~ 发表于 2025-12-4 09:15

制作大气

偶然~ 发表于 2025-12-4 09:16

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2025-12-4 09:16

期待霜染枫丹佳作频出！

偶然~ 发表于 2025-12-4 09:16

愿霜染枫丹事事如意吉祥，幸福快乐绵长。

偶然~ 发表于 2025-12-4 09:16

感谢霜染枫丹支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

杨帆发表于 2025-12-4 13:08

效果不错，谢谢枫丹精彩分享{:4_204:}

红影发表于 2025-12-4 19:21

现在是特效歌词，而且能是想要的大小了。
枫丹聪明，这么快就弄好了{:4_199:}

霜染枫丹 发表于 2025-12-4 20:33

偶然~ 发表于 2025-12-4 09:15
来欣赏霜染枫丹精品佳作！

感谢偶然的鼎力支持！祝您冬安~~{:4_204:}

霜染枫丹 发表于 2025-12-4 20:34

杨帆发表于 2025-12-4 13:08
效果不错，谢谢枫丹精彩分享

欢迎杨帆，我感谢您的鼓励关照，晚上好{:4_204:}

霜染枫丹 发表于 2025-12-4 20:41

红影发表于 2025-12-4 19:21
现在是特效歌词，而且能是想要的大小了。
枫丹聪明，这么快就弄好了

红影晚上好~~

现在我就像是秋收后赶着去拾荒的心情{:4_189:}
这么多好东西可让我遇到了，我得尽最大可能的去“抢”一些回来，然后入库。多制作一个就多理解了一些，我不懂马老师教程里的那些“天书”，就把代码导入网页，通过改变文件来看画面变化，记住这些变化就能玩了{:4_173:}。谢谢红影的支持，我继续加油{:4_204:}{:4_190:}

偶然~ 发表于 2025-12-4 20:47

霜染枫丹发表于 2025-12-4 20:33
感谢偶然的鼎力支持！祝您冬安~~

{:4_180:}

页: [1]

花潮论坛's Archiver

套用马老师代码制作新歌 《岁月的记忆》

套用马老师代码制作新歌《岁月的记忆》