三千梦
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
.pa { offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/sqm.webp') no-repeat center/cover; }
</style>
<div id="pa" class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
const dida = [,,,,,,,,,,,,,,,,,,,,,,,,];
const ys1 = `毛泽少 - 伤心花\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 ys2 = `候康 - 鸟与人\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 ys3 = `王胜娚 - Hate you\n阴霾的天气 我好像无法呼吸\n就像是沉浸在海底的鱼\n回味的过去 我好像快要忘记\n一直曾未离去身旁的你\n哎呦喂 白天变好黑\n哎呦喂 我想你\n哎呦喂 没出息\nHey Jude 爱不爱没关系\nHey Jude 别淘气\nHey Jude 煽动睫毛的情绪\nHey Jude 别放弃\n阴霾的天气 我好像无法呼吸\n就像是沉浸在海底的鱼\n回味的过去 我好像快要忘记\n一直曾未离去身旁的你\n哎呦喂 白天变好黑\n哎呦喂 我想你\n哎呦喂 没出息\nHey Jude 离开水活不下去\nHey Jude 需要你\nHey Jude 没有你的latte\nHey Jude 我爱你\nHey Jude 爱不爱没关系\nHey Jude 别淘气\nHey Jude 煽动睫毛的情绪\nHey Jude 别放弃\n-- End --`;
const ys4 = `一颗狼星 - 三千梦\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 offsetData = ;
const gcAr = .map((ys, key) => lrc2HC(ys, offsetData));
const musicAr = [
['https://music.163.com/song/media/outer/url?id=473441077', '毛泽少 - 伤心花', gcAr],
['https://music.163.com/song/media/outer/url?id=32685948', '侃侃 - 嘀嗒', dida],
['https://music.163.com/song/media/outer/url?id=36894566', '候康 - 鸟与人', gcAr],
['https://music.163.com/song/media/outer/url?id=305417', '王胜娚 - Hate You', gcAr],
['https://music.163.com/song/media/outer/url?id=2648196685', '一颗狼星 - 三千梦', gcAr],
];
const tz = TZ.TZ('pa');
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/2418175/00/02/06/5b500bc3cfd48.mp4',
style: 'width: 15vw; height: 16vw; left: 10px; top: 20%; border-radius: 50%; cursor: pointer; pointer-events: auto'
}).playmp3();
tz.mlist(musicAr, true, 'bottom: 60px; --border : 0;').style('left: 20px; bottom: 20px');
tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/mufuz2.jpg' })
.style('bottom: 120px; clip-path: circle(45%)')
.playmp3();
tz.bgprog().style('bottom: 20px');
tz.fs().style('right: 20px; bottom: 20px');
</script> 本帖是 tzMaker中级教程七的配套实例，源码和相关讲解请移步：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=88238 本帖最后由 梦江南 于 2025-11-23 14:14 编辑
黑黑老师的这张背景图真漂亮。{:4_187:} 漂亮~谢谢马老师经典示范{:4_180:} 这个是那两贴的示例吧。 这个播放器效果好像以前有差不多的类型，播放器控制视频的连接 这次是多歌曲的的而且歌词同步，黑黑威武{:4_170:}{:4_178:} 画面羞答答的美女，黑黑这个背景图漂亮的{:4_199:} 素材美女选的很漂亮！{:4_199:} 梦江南 发表于 2025-11-23 13:51
黑黑老师的这张背景图真漂亮。
{:4_190:} 杨帆 发表于 2025-11-23 14:46
漂亮~谢谢马老师经典示范
{:4_191:} 漫云儿 发表于 2025-11-23 17:19
素材美女选的很漂亮！
嗯嗯，人家长得好 小辣椒 发表于 2025-11-23 15:42
这个播放器效果好像以前有差不多的类型，播放器控制视频的连接
对，都差不多的。这帖有两个音频控制器 小辣椒 发表于 2025-11-23 15:44
这次是多歌曲的的而且歌词同步，黑黑威武
之前有过一个示范的 小辣椒 发表于 2025-11-23 15:47
画面羞答答的美女，黑黑这个背景图漂亮的
是人家菇凉长得好 樵歌 发表于 2025-11-23 15:05
这个是那两贴的示例吧。
第七讲 其实第七讲里点开也是这个呢。
其中的四首是直接由原生歌词转换的呢，取了相同的偏移量，结果还挺不错{:4_187:} 红影 发表于 2025-11-23 20:40
其实第七讲里点开也是这个呢。
其中的四首是直接由原生歌词转换的呢，
这个二楼已经讲明了 其实刚才那个帖子忘记问问了，这个偏移量是怎么弄出来的，纯粹凭感觉？ 红影 发表于 2025-11-23 20:41
其实刚才那个帖子忘记问问了，这个偏移量是怎么弄出来的，纯粹凭感觉？
观察一下就好。另外，有一些制作是有偏移量在里面的，看看就知道