白雪 - 千古绝唱

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/qgji.webp') no-repeat center/cover; }
   
4.     .vid { width: 15%; height: auto; border-radius: 50%; mix-blend-mode: screen; cursor: pointer;
   
5.      box-shadow: 0 0 0 5px rgba(0, 200, 0, .25); }
   
6. </style>
   
7. 
   
8. <div id="pa" class="pa"></div>
   
9. 
   
10. <script type="module">
    
11.     import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
    
12.     import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
    
13.     const tz = TZ.TZ('pa');
    
14.     const gc = lrc2HC(`[00:00.200]...（清唱过门）\n[00:41.600]白雪 - 千古绝唱\n[01:10.580]人生自古谁无情\n[01:13.210]情到深处天地动\n[01:16.400]人间多少绝唱千古颂\n[01:23.090]莺莺张生红娘子\n[01:26.280]十娘怒沉百宝箱\n[01:29.400]若无真情无绝唱\n[01:36.090]情海无惊波涛凶\n[01:39.090]风流淹没红尘中\n[01:42.340]大浪淘尽多少痴情种\n[01:48.960]雷峰塔呀白娘子\n[01:52.150]红楼梦中梦难醒\n[01:55.340]千古绝唱千古情\n[02:01.840]自古红颜多薄命\n[02:08.280]有情总被无情伤\n[02:14.590]孟姜女哭长城\n[02:19.280]千古绝唱谁人听\n[02:22.640]梁山伯祝英台\n[02:27.510]千古绝唱唱到今\n[02:30.870]孟姜女哭长城\n[02:34.060]千古绝唱谁人听\n[02:37.310]梁山伯祝英台\n[02:40.560]千古绝唱唱到今\n[02:43.810]孟姜女哭长城\n[02:47.000]千古绝唱谁人听\n[02:50.250]梁山伯祝英台\n[02:53.560]千古绝唱唱到今\n[03:55.390]情海无惊波涛凶\n[03:58.390]风流淹没红尘中\n[04:01.640]大浪淘尽多少痴情种\n[04:08.200]雷峰塔呀白娘子\n[04:11.330]红楼梦中梦难醒\n[04:14.640]千古绝唱千古情\n[04:21.200]自古红颜多薄命\n[04:27.550]有情总被无情伤\n[04:34.060]孟姜女哭长城\n[04:38.300]千古绝唱谁人听\n[04:42.050]梁山伯祝英台\n[04:46.740]千古绝唱唱到今\n[04:50.490]孟姜女哭长城\n[04:53.490]千古绝唱谁人听\n[04:56.680]梁山伯祝英台\n[04:59.990]千古绝唱唱到今\n[05:03.240]孟姜女哭长城\n[05:06.430]千古绝唱谁人听\n[05:09.620]梁山伯祝英台\n[05:12.930]千古绝唱唱到今\n[05:16.180]孟姜女哭长城\n[05:19.300]千古绝唱谁人听\n[05:22.620]梁山伯祝英台\n[05:25.800]千古绝唱唱到今`);
    
15.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=27946560' });
    
16.     tz.add('video', '', 'vid', {
    
17.         src: 'https://img.tukuppt.com/video_show/2475824/00/01/90/5b4d5ec6e96e0.mp4',
    
18.         DisablePictureInPicture: 'true'
    
19.     }).playmp3();
    
20.     tz.lrc(gc).style('bottom: 60px').style('--border: 0');
    
21.     tz.bgprog().style('bottom: 20px');
    
22.     tz.fs().style('right: 20px; top: 20px');
    
23. </script>

复制代码

马黑黑

视频用作小播，使用 .vid 选择器重新设置所需属性：宽、高、融合模式（去掉黑色背景）、指针样式、阴影（模拟边框）。

视频HTML标签有画中画，默认会自动开启，关闭它可在 tz.add() 指令加入视频时添加 DisablePictureInPicture 属性，值设为 false，此设置将等同于 <video ... DisablePictureInPicture="false" ...> 中的红色部分

梦江南

欣赏黑黑老师的精彩制作。学习了！

偶然~

早安吉祥！打开电脑就看到马黑黑老师在花潮论坛分享的音画，瞬间被这“雪境+古风+绝唱”的组合戳中了！

偶然~

画面里，雪落枝头、素衣临风，古风意境铺得极雅；《千古绝唱》的旋律一响，那句“千古绝唱，唱尽人间沧桑”便在雪意中漾开，与画面里的静谧、苍茫感相融，像给“雪夜听歌”添了层诗意的滤镜。

偶然~

马老师的制作的音画搭配，把“雪境的冷寂”和“歌声的深情”调和得妙极，让听者仿佛置身雪夜，跟着旋律触摸到“千古”的厚重，又在雪意里寻到一丝温柔的共鸣～

偶然~

感谢马老师在花潮论坛的分享，让这“音画+古风”的组合有了更多人共鸣，也让更多人感受到传统文化在现代表达里的鲜活感～

偶然~

期待马老师后续更多有温度、有质感的创作，也祝在花潮论坛的交流氛围越来越热，大家都能在这片文化天地里，找到属于自己的“精彩”～

偶然~

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

偶然~

愿马老师事事如意吉祥，幸福快乐绵长。

霜染枫丹

很好听的歌，很好看的图，感谢老师分享，上午好

马黑黑

霜染枫丹 发表于 2025-11-25 11:24
很好听的歌，很好看的图，感谢老师分享，上午好

马黑黑

偶然~ 发表于 2025-11-25 08:47
期待马老师后续更多有温度、有质感的创作，也祝在花潮论坛的交流氛围越来越热，大家都能在这片文化天地里， ...

马黑黑

梦江南 发表于 2025-11-25 08:25
欣赏黑黑老师的精彩制作。学习了！

偶然~

马黑黑 发表于 2025-11-25 11:42

梦江南

马黑黑 发表于 2025-11-25 08:02
视频用作小播，使用 .vid 选择器重新设置所需属性：宽、高、融合模式（去掉黑色背景）、指针样式、阴影（模 ...

黑黑老师，这MP4它会自动适应MP4高的。我本来还在愁呢。