Moonlight

马黑黑 发表于 2025-3-27 19:02

马黑黑 发表于 2025-3-27 19:02

<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
#tz {margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/moonlight.jpg') no-repeat center/cover; border-radius: 8px; }
#mplayer { bottom: 20px; }
#fsbtn { top: 25%; }
</style>

<div id="tz" class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=25910910" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/19/13/45/55/video67da5a13623dd.mp4" autoplay loop></video>
</div>

<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
hcplay(tz);
</script>
</pre></div>

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

马黑黑 发表于 2025-3-27 19:02

本帖最后由马黑黑于 2025-3-27 21:08 编辑 <br /><br /><style>
details > summary { font-weight: bold; transitions: 1s; cursor: pointer; }
details > summary { color: red; }
details .red { color: red; }
details .green { color: green; }
</style>

<h2>花潮经典版三合一播放器</h2>
<details name="san">
<summary>啥是三合一</summary>
<blockquote>
① 纯音乐<br>
② 横排原生lrc歌词<br>
③ 竖排原生lrc歌词
</blockquote>
</details>
<details name="san">
<summary>如何引用资源</summary>
<blockquote>
① 帖子CSS代码中第一行加入：@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';<br>
② 帖子JS代码加入：import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';<br>
</blockquote>
</details>
<details name="san">
<summary>怎样自定义配置</summary>
<blockquote>
① 通过CSS设置UI<br>
<pre>
/* 播放器 */
#mplayer {
bottom: 20px; <span class="green">/* 定位 : 还可以使用 top、left、right 配置 */</span>
--track: #ccc; <span class="green">/* 进度条底色 */</span>
--prog: #aaa; <span class="green">/* 进度条指示色 */</span>
}

<span class="green">/* 歌词：纯音乐帖不需要配置 */</span>
#lrcDiv {
top: 10%; <span class="green">/* 定位，支持 top、left、bottom、right 配套使用 */</span>
color: #eee; <span class="green">/* 歌词颜色 */</span>
writing-mode: vertical-rl; <span class="green">/* 竖排配置：横排不需要设置 */</span>
--hlcolor: #333; <span class="green">/* 歌词高亮色 */</span>
}

<span class="green">/* 全屏按钮 */</span>
#fsbtn {
color: white; <span class="green">/* 前景色 */</span>
border-color: white; <span class="green">/* 边框颜色 */</span>
}
</pre>
② HTML配套代码<br>
<pre>
<div id="tz" <span class="red">class="pa"</span>&gt
<span class="green"><-- 如果需要使用模块提供的视频样式 --></span>
<audio src="音频地址" autoplay loop></audio>
<video <span class="red">class="vid"</span> src="视频地址" autoplay loop></video>
<span class="green"><-- 其它自定义代码 --></span>
</div>
</pre>
③ JS配置代码<br>
<pre>
<script <span class="red">type="module"</span>>
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js'; <span class="green">// 引用模块</span>
<span class="green">// 纯音帖 : 注意 tz 是帖子容器对应的id，下同</span>
hcplay(tz);
<span class="green">// 歌词同步帖</span>
var gc = `。。。`; <span class="green">/* 歌词格式请参考帖子代码，支持分行书写（替代 \n 符号）*/</span>
hcplay(tz, gc); <span class="green">// 或者： hcplay(tz, gc, 7);（其中 7 指显示的歌词行数）</span>
</script>
</pre>
</blockquote>
</details>

花飞飞 发表于 2025-3-27 19:24

这个是纯音，无歌词版的。。
小播样子也变了一丢丢，蓝绿冷调的，
滑块跟龙眼似的，中间还有点小点点，立体感是有了。。{:4_173:}

花飞飞 发表于 2025-3-27 19:25

这个视频特别好看，移动的花树和波光粼粼的海面，还有失眠超级大月亮，美感动感十足{:4_199:}

花飞飞 发表于 2025-3-27 19:26

极简代码，十来行，酷毙了{:4_170:}

马黑黑 发表于 2025-3-27 19:35

花飞飞发表于 2025-3-27 19:24
这个是纯音，无歌词版的。。
小播样子也变了一丢丢，蓝绿冷调的，
滑块跟龙眼似的，中间还有点小点点，立 ...

可能你没看出味道来

马黑黑 发表于 2025-3-27 19:35

花飞飞发表于 2025-3-27 19:25
这个视频特别好看，移动的花树和波光粼粼的海面，还有失眠超级大月亮，美感动感十足

这个视频我还是不太满意，但确实没有找到比它更好的了

马黑黑 发表于 2025-3-27 19:36

花飞飞发表于 2025-3-27 19:26
极简代码，十来行，酷毙了

你可能还没看出模块的尾大{:4_170:}

清茶煮雪 发表于 2025-3-27 19:38

太美了，看呆了，忘记怎么赞美了{:4_173:}

清茶煮雪 发表于 2025-3-27 19:40

黑黑老师的代码贴太精致了，{:4_199:}

马黑黑 发表于 2025-3-27 19:40

菲儿发表于 2025-3-27 19:38
太美了，看呆了，忘记怎么赞美了

你就说：好，好，好{:4_170:}

马黑黑 发表于 2025-3-27 19:42

菲儿发表于 2025-3-27 19:40
黑黑老师的代码贴太精致了，

果酱果酱

清茶煮雪 发表于 2025-3-27 19:43

一上来了就淘到宝了{:4_173:}，虽然我不懂代码，但可以套用，真好！{:4_187:}

花飞飞 发表于 2025-3-27 19:48

马黑黑发表于 2025-3-27 19:35
可能你没看出味道来

有，目前我是火烧眉毛式的味道{:4_170:}还没看藏起来的，实际上我在等你说明

花飞飞 发表于 2025-3-27 19:49

马黑黑发表于 2025-3-27 19:35
这个视频我还是不太满意，但确实没有找到比它更好的了

这个网站里的算漂亮了。。比熊猫的式样多。。
我留言本里还有一个视频地址，据说很好用，我还没空试，有空你去试看看呗。{:4_170:}

花飞飞 发表于 2025-3-27 19:50

马黑黑发表于 2025-3-27 19:36
你可能还没看出模块的尾大

马上去。。。{:4_170:}这就去。。

花飞飞 发表于 2025-3-27 19:52

马黑黑发表于 2025-3-27 19:36
你可能还没看出模块的尾大

我一般不爱看JS的，就没点。
但这个为啥多得跟头发似的。{:4_170:}

红影发表于 2025-3-27 20:40

这个是新封装的，变成了三合一，正在猜想是哪三合一{:4_173:}

马黑黑 发表于 2025-3-27 20:42

马黑黑发表于 2025-3-27 19:40
你就说：好，好，好

{:4_172:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

Moonlight