论坛 › 音乐沙龙 › 昨夜星辰 帖赠：清茶煮雪（学习黑黑千古绝唱播放器效果）

小辣椒 发表于 2025-11-27 21:14

昨夜星辰 帖赠：清茶煮雪（学习黑黑千古绝唱播放器效果）

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
    .pa {margin: 140px 0 60px calc(50% - 460px); width: 1400px; height: 800px; background: #000 url('https://wj.zp68.com/lxx/yunhua/2025/11/26/GIF.gif') no-repeat center/cover; }
    .vid { width: 15%; left: 42%; top:74%;height: auto; border-radius: 10%; mix-blend-mode: LightSeaGreen; cursor: pointer;
   box-shadow: 0 0 0 5px rgba(0, 200, 0, .25); }

</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 tz = TZ.TZ('pa');
    const gc = lrc2HC(`昨夜星辰
歌手：高胜美
帖赠：清茶煮雪
昨夜的 昨夜的星辰已坠落
消失在 遥远的银河
想记起 偏又已忘记
那份爱 换来的是寂寞
爱是不变的星辰
爱是永恒的星辰
绝不会在银河中坠落
常忆着那份情那份爱
今夜星辰今夜星辰
依然闪烁
LRC编辑：小辣椒
今夜的 今夜的星辰依然闪烁
像眼神 点燃爱的火
想得到 偏又怕失去
那份爱 深深埋在心窝
爱是不变的星辰
爱是永恒的星辰
绝不会在银河中坠落
常忆着那份情那份爱
今夜星辰今夜星辰
依然闪烁
谢谢欣赏

`);
    tz.add('audio', '', '', { src: 'https://wj1.zp68.com:812/lxx/yunhua/20211226/06.mp3' });
    tz.add('video', '', 'vid', {
      src: 'https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bde6a1eca.mp4',
      DisablePictureInPicture: 'true'
    }).playmp3();
    tz.lrc(gc).style('top: 80px;color: white; --c1: transparent; --c2: white');
    tz.bgprog().style(' width: 300px; height:4px;color: Silver; bottom: 40px');
    tz.fs().style('right: 20px; top: 20px');
</script>

小辣椒 发表于 2025-11-27 21:15

@清茶煮雪

雪儿不好意思做个作业当礼物了，别嫌弃啊{:4_179:}

小辣椒 发表于 2025-11-27 21:18

@马黑黑

黑黑，我昨天晚上试了按你的备注我去测试了，JS里面我不会修改，后来二个图片效果出来了，播放器没有了，今天还是按昨天的制作发了，以后再重新学习过了

小辣椒 发表于 2025-11-27 21:19

反正感觉没有系统学习要完全想自己的效果一下子是做不出来了{:4_198:}

马黑黑 发表于 2025-11-27 22:29

小辣椒 发表于 2025-11-27 21:18
@马黑黑

黑黑，我昨天晚上试了按你的备注我去测试了，JS里面我不会修改，后来二个图片效果出来了，播放 ...

JS操作元素，需要对应元素的id，昨天给的示例，，分别对应于视频标签id（vid）、图片之一id(ipic）、图片之二id（ipic1），后面的语句不用改，只需要确保HTML元素的id都再 [...] 里面。

HTML各元素的id，对应CSS里的 id 选择器 #id，例如：

<img id="ipic" src="..." />

应再 CSS 里有：

#ipic { width: 200px; height: 200px; ... }

CSS 制定HTML元素的样式（例如上面的宽高设置），JS 对元素做相关操作（例如点击元素可以暂停/播放、播放音乐）。

CSS、HTML、JS 是做H5帖子的三件套，彼此间的关系弄清楚，就能在做帖时得心应手，稀里糊涂的认知只会无端消耗时间和精力。

霜染枫丹 发表于 2025-11-27 22:45

很喜欢的歌曲，很精致的画面，点赞！{:4_187:}

樵歌 发表于 2025-11-28 07:20

你总是做得那么好那么好
令我心驰神往也傲骄
小辣椒 小辣椒
你音画全都那么的妙
不得了，不得了
我咧嘴，大声地笑
{:4_190:}{:4_204:}{:4_170:}

清茶煮雪 发表于 2025-11-28 10:11

打开窗口就听见“昨夜星辰”一首非常经典的歌曲 听着歌曲想起小时候的欢乐时光{:4_205:}

清茶煮雪 发表于 2025-11-28 10:12

{:4_197:}一百二十分的遗憾 这里每次的代码贴我都看不到特效，我这里看见的是静止的画面，还好能听见歌曲，应该是我浏览器的原因 ，{:4_203:}但这电脑不能去设置。抽空用家里电脑来欣赏。

清茶煮雪 发表于 2025-11-28 10:17

本帖最后由 清茶煮雪 于 2025-11-28 10:22 编辑

小辣椒 发表于 2025-11-27 21:15
@清茶煮雪

雪儿不好意思做个作业当礼物了，别嫌弃啊
谢谢亲爱滴小辣椒{:4_179:} 好喜欢的夜景图图和歌曲很搭配，听歌赏图想起了那绚丽多彩的昨夜星辰 ~{:4_187:}

清茶煮雪 发表于 2025-11-28 10:22

小辣椒 发表于 2025-11-27 21:15
@清茶煮雪

雪儿不好意思做个作业当礼物了，别嫌弃啊

循环听了很久，手机看见了漂亮的播发器，小辣椒你咋这么优秀 学到了黑黑老师的技术{:4_204:} 给你点赞！
谢谢你的礼物 我很喜欢，{:4_191:}

清茶煮雪 发表于 2025-11-28 10:25

小辣椒 发表于 2025-11-27 21:19
反正感觉没有系统学习要完全想自己的效果一下子是做不出来了
你已经制作得很好了，我还不会呢{:5_117:}
给你送花{:4_204:}制作辛苦啦，祝开心快乐！

红影 发表于 2025-11-28 13:40

这背景制作很漂亮，配上这样的播放器更美了，非常漂亮。
给亲爱的制作点赞，雪儿收礼开心{:4_187:}

杨帆 发表于 2025-11-28 16:39

漂亮~谢谢小辣椒精彩分享，祝清茶收礼开心{:4_204:}

小辣椒 发表于 2025-11-28 21:05

霜染枫丹 发表于 2025-11-27 22:45
很喜欢的歌曲，很精致的画面，点赞！

谢谢枫丹老师欣赏{:4_171:}

小辣椒 发表于 2025-11-28 21:06

樵歌 发表于 2025-11-28 07:20
你总是做得那么好那么好
令我心驰神往也傲骄
小辣椒 小辣椒


樵哥哥晚上好，你要笑S我啊{:4_170:}

小辣椒 发表于 2025-11-28 21:07

清茶煮雪 发表于 2025-11-28 10:11
打开窗口就听见“昨夜星辰”一首非常经典的歌曲 听着歌曲想起小时候的欢乐时光
雪儿晚上好，已经分享过几次的歌了，特别那首电子琴的纯音的昨夜星辰我最喜欢了


昨夜星辰_(DJ电子琴)演奏；李添兵
https://www.huachaowang.com/forum.php?mod=viewthread&tid=77909&fromuid=4275
(出处: 花潮论坛)

小辣椒 发表于 2025-11-28 21:13

清茶煮雪 发表于 2025-11-28 10:12
一百二十分的遗憾 这里每次的代码贴我都看不到特效，我这里看见的是静止的画面，还好能听见歌曲， ...

雪儿这里没有加特效，我这个是只加了几颗星星的动图，只是播放器是视频，有的手机会看不见，我手机可以看见播放器点击声音就出来了

小辣椒 发表于 2025-11-28 21:14

清茶煮雪 发表于 2025-11-28 10:25
你已经制作得很好了，我还不会呢
给你送花制作辛苦啦，祝开心快乐！

不客气，这个是我的作业，还有许多应该修改的方面，只能慢慢来了，许多黑黑教程我没有学习的

小辣椒 发表于 2025-11-28 21:16

红影 发表于 2025-11-28 13:40
这背景制作很漂亮，配上这样的播放器更美了，非常漂亮。
给亲爱的制作点赞，雪儿收礼开心

亲爱的，其实这个是我动图改的jpg再加星星的动图，比较简单，也是节约时间{:4_189:}

查看完整版本: 昨夜星辰 帖赠：清茶煮雪（学习黑黑千古绝唱播放器效果）