套用马老师代码制作 《冬恋》
本帖最后由 霜染枫丹 于 2025-12-13 02:09 编辑 <br /><br /><style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css?v1';
.pa { --offsetX: 81px; --bg: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693c4bee4875f.gif') no-repeat center/cover; }
/* 歌词样式修改：左移 + 字体改变 */
.fadeInLrc {
right: auto; /* 取消右侧定位 */
left: 5%; /* 左侧距离，可根据需要调整（0%-100%） */
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; /* 自定义字体 */
font-size: 40px; /* 字体大小 */
font-weight: 500; /* 字体粗细（normal/bold/100-900） */
color: #ffffff; /* 字体颜色 */
text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 文字阴影（增强可读性） */
}
.char { display: block; }
/* 可选：调整歌词容器的其他样式 */
.lrc-container {
max-width: 300px; /* 歌词最大宽度，防止过长 */
line-height: 1.8; /* 行高，改善可读性 */
}
</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 hcLrc = tz.lrc2HC(`
作词：未知
冬恋 对唱版
歌手：海风 君子兰
作曲：日曲
伴唱：凌菲
寒风起霜降山顶
深秋已过去
寒云飞转眼远离
带走我的心
雁儿呀也向南飞
请你寄上我心意
告诉他深情依旧
就像翠竹长青
绵绵意 诉不尽
但愿早日捎来他消息
寒风起霜降山顶
深秋已过去
寒云飞转眼远离
带走我的心
雁儿呀也向南飞
请你寄上我心意
告诉他深情依旧
就像翠竹长青
绵绵意 诉不尽
但愿早日捎来他消息
寒风起霜降山顶
深秋已过去
寒云飞转眼远离
带走我的心
雁儿呀也向南飞
请你寄上我心意
告诉他深情依旧
就像翠竹长青
绵绵意 诉不尽
但愿早日捎来他消息\n`);
tz.add('audio', '', '', {src: 'https://wl.nn717888.cn/view.php/15a66b8b60ca48f9db825856fea268fe.mp3'});
tz.lrc(hcLrc, '', true);
tz.add('div', 'player', 'wrap200', {style: 'bottom: 20px'});
tz.add('svg', 'msvg', '', {width: 200, height: 200}).to('player');
tz.svgson('msvg', 'circle', {id: 'track', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'silver', 'stroke-width': 10});
tz.svgson('msvg', 'circle', {id: 'prog', cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'orange', 'stroke-width': 10});
tz.svgprog('msvg', 'track', 'prog');
tz.add('img', '', 'rot-ani', {
src: 'https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693c5997ce2fd.png',
alt: '',
style: 'position: absolute; width: 240px; cursor: pointer; clip-path: circle(80px)'
}).to('player').playmp3();
tz.fs().style('right: 30px; bottom: 30px');
</script> 远方起伏连绵的山峦，夕阳红得无限柔暖，一群回归的鸿雁在金色的天空下飞翔，构成一幅梦幻 般的初冬即景！太美啦。 不错的制作。美中不足的是歌词配色不太符合WCAG（无障碍）标准，前景色、高亮色都需要调整，尽量提升文本的辨识度 本帖最后由 霜染枫丹 于 2025-12-6 09:07 编辑
樵歌 发表于 2025-12-6 07:05
远方起伏连绵的山峦，夕阳红得无限柔暖，一群回归的鸿雁在金色的天空下飞翔，构成一幅梦幻 般的初冬即景！ ...
谢谢小樵哥的支持鼓励。上午好~~{:4_204:} 马黑黑 发表于 2025-12-6 09:01
不错的制作。美中不足的是歌词配色不太符合WCAG（无障碍）标准，前景色、高亮色都需要调整，尽量提升文本的 ...
感谢马老师的指点，我现在就修改一下歌词颜色。上午好！{:4_204:}
本帖最后由 霜染枫丹 于 2025-12-6 09:44 编辑
马黑黑 发表于 2025-12-6 09:01
不错的制作。美中不足的是歌词配色不太符合WCAG（无障碍）标准，前景色、高亮色都需要调整，尽量提升文本的 ...
显示太慢了，我把字体大小加大了，初始24，显示28，
颜色.
color: #FFFF00; /* 亮黄色 */
高亮 color: #FF5722; /* 橙红色 */
我现在有事离开，回来后看不合适我在整改，谢谢马老师，冬安！！{:4_204:}{:4_190:}
https://www.yueyijyw.com/forum.php?mod=viewthread&tid=1174
漂亮，面对群山，遥想故乡。和歌曲很相符。
欣赏枫丹好帖{:4_187:} 没有声音？ 霜染枫丹 发表于 2025-12-6 09:36
显示太慢了，我把字体大小加大了，初始24，显示28，
颜色.
color: #FFFF00; /* 亮黄色 */
多尝试，总有解决方案 霜染枫丹 发表于 2025-12-6 09:07
感谢马老师的指点，我现在就修改一下歌词颜色。上午好！
{:4_190:} 本帖最后由 夕阳黄昏 于 2025-12-6 10:33 编辑
无声，只有幅画面。
const itemTime = parseFloat(lyricItems<i>.dataset.time);论坛把原来的方括号改变成尖括号，这就是出问题的原因。
夕阳黄昏 发表于 2025-12-6 10:31
无声，只有幅画面。
论坛把原来的方括号改变成尖括号，这就是出问题的原因。
谢谢夕阳黄昏老师！我外出才回来。这套代码在DZ3.5模板播放的很正常，我理解可能是这样的。
我写的：lyricItems论坛看到的：lyricItems<i>实际执行时：lyricItems<i> 是无效的JavaScript语法，这我就理解了为什么DZ3.5模板能正常播放了，谢谢您，我这就试着看看能否给改过来。不管是否能改过来，这对我都是宝贵的经验，我需要好好学习理解运用。论坛模板不会为我而改变，我不会用时基本功欠缺，想玩，短板就要补上，特别感谢！
夕阳黄昏 发表于 2025-12-6 10:31
无声，只有幅画面。
论坛把原来的方括号改变成尖括号，这就是出问题的原因。
特别感谢您！我把方括号里面添加了空格，const itemTime = parseFloat(lyricItems[ i ].dataset.time);问题解决了。这不仅是这个帖子，这是以后遇到问题的首选项，您不指点，我不知道论坛会有这个问题，此刻心里特别高兴！{:4_204:}
https://cccimg.com/view.php/c8e606c8f67f703213d7138c756ade23.gif
偶然~ 发表于 2025-12-6 10:05
没有声音？
偶然下午好，现在有声音了。我今天有事情上午着急就下线了，刚才回来看到夕阳黄昏老师的提示，知道了错在哪里，现在可以听到了。
谢谢你一贯的支持，冬安~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2025-12-6 16:30
偶然下午好，现在有声音了。我今天有事情上午着急就下线了，刚才回来看到夕阳黄昏老师的提示，知道了错在 ...
现在又声音了，音画完美大气 偶然~ 发表于 2025-12-6 22:56
现在又声音了，音画完美大气
基本功不达标，得到夕阳黄昏老师的指点才修好，谢谢偶然的支持，冬安~~{:4_190:}
霜染枫丹 发表于 2025-12-6 22:58
基本功不达标，得到夕阳黄昏老师的指点才修好，谢谢偶然的支持，冬安~~
{:4_180:}
周末愉快 看到有AI制作，整图都是AI生成的吗 绿叶清舟 发表于 2025-12-7 12:41
看到有AI制作，整图都是AI生成的吗
是的，图片都是AI生成的，谢谢轻舟的支持，周末快乐！{:4_204:}{:4_190:} 霜染枫丹 发表于 2025-12-7 16:24
是的，图片都是AI生成的，谢谢轻舟的支持，周末快乐！
不客气了，周末快乐，
页:
[1]
2