马黑黑 发表于 2024-12-24 12:05

风吹西湾(澳门回归25周年情怀曲)

<style>
        @import 'https://638183.freep.cn/638183/web/mod/path_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/xiwj.webp') no-repeat center/cover; }
        #fsbtn { top: 20px; }
        #mplayer { bottom: 70px; --path: M5 65 Q160 -60,195 75; --xx: 10; --yy: 16; }
        #lrc { bottom: 15px; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=2657056659"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/20/16/55/video65044b372f282.mp4" autoplay loop muted></video>
        <div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
        <div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
</script>

马黑黑 发表于 2024-12-24 12:06

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/mod/path_lrc.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/xiwj.webp') no-repeat center/cover; }
        #fsbtn { top: 20px; }
        #mplayer { bottom: 70px; --path: M5 65 Q160 -60,195 75; --xx: 10; --yy: 16; }
        #lrc { bottom: 15px; }
&lt;/style&gt;

&lt;div id="tz" class="pa"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=2657056659"&gt;&lt;/audio&gt;
        &lt;video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/20/16/55/video65044b372f282.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="lrc" class="lrc" data-lrc="HCPlayer"&gt;HCPlayer&lt;/div&gt;
        &lt;div id="fsbtn" class="fsbtn"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/path_lrc.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        var lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
        hcplay(tz, lrcAr);
        fscreen.fs(tz, fsbtn);
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2024-12-24 12:07

本帖演示自由路径进度条播放器模块如何用于花潮格式LRC歌词同步

马黑黑 发表于 2024-12-24 12:10

进度条样式的设计源自当代中国桥梁的局部外观。

樵歌 发表于 2024-12-24 14:18

真的是创意无限了,那港珠澳大桥穿过画门,跟真的一样,这特许器也象桥的弯度一样。

樵歌 发表于 2024-12-24 14:18

这歌我可学不会{:4_201:}

世外桃源 发表于 2024-12-24 14:47

好看,好听

世外桃源 发表于 2024-12-24 14:47

感谢老师佳作分享

朵拉 发表于 2024-12-24 16:05

视觉和听觉的享受,学习了{:4_190:}

梦江南 发表于 2024-12-24 16:08

这张图图真漂亮。时间过得好快一晃澳门回归25周年了!

红影 发表于 2024-12-24 17:35

这个把路径调整了,还增加了歌词,特别好{:4_199:}

红影 发表于 2024-12-24 17:38

还以为加了云朵和粒子两个视频,原来一个视频里的这些效果呢,还有个月亮正好在大桥的一端,让底图更增添了韵味呢。这个用得巧妙{:4_187:}

马黑黑 发表于 2024-12-24 17:48

红影 发表于 2024-12-24 17:38
还以为加了云朵和粒子两个视频,原来一个视频里的这些效果呢,还有个月亮正好在大桥的一端,让底图更增添了 ...

无巧不成书

马黑黑 发表于 2024-12-24 17:49

樵歌 发表于 2024-12-24 14:18
真的是创意无限了,那港珠澳大桥穿过画门,跟真的一样,这特许器也象桥的弯度一样。

{:4_190:}

马黑黑 发表于 2024-12-24 17:50

樵歌 发表于 2024-12-24 14:18
这歌我可学不会

这个需要一点点数学知识,@小辣椒 可以教教你,早两年她经常辅导孩纸的

马黑黑 发表于 2024-12-24 17:52

梦江南 发表于 2024-12-24 16:08
这张图图真漂亮。时间过得好快一晃澳门回归25周年了!

是吧?那时候你儿子刚好出生呢

马黑黑 发表于 2024-12-24 17:52

朵拉 发表于 2024-12-24 16:05
视觉和听觉的享受,学习了

{:4_190:}

马黑黑 发表于 2024-12-24 17:52

红影 发表于 2024-12-24 17:35
这个把路径调整了,还增加了歌词,特别好

好就好{:4_170:}

马黑黑 发表于 2024-12-24 17:53

世外桃源 发表于 2024-12-24 14:47
好看,好听

{:4_191:}

杨帆 发表于 2024-12-24 18:41

视听盛宴,感谢老师精彩分享{:4_191:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 风吹西湾(澳门回归25周年情怀曲)