爱无赦
<style>@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.1';
#ma { margin: 30px 0 30px calc(50% - 593px); width: 1000px; height: 600px; background: url('https://638183.freep.cn/638183/t24/webp2/awu.webp') no-repeat center/cover; position: relative; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#mplayer { position: absolute; bottom: 20px; left: 20px; }
#mplayer text { fill: silver; }
#mplayer circle { opacity: .7; }
#mplayer use { fill: #eee; }
#lrc { top: 20px; }
#fsbtn { bottom: 20px; }
</style>
<div id="ma" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=209634" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/18/03/video63662a4bd0ee7.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 fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js';
var gcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(ma, gcAr);
fscreen.fs('ma', 'fsbtn');
</script> <h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.1';
#ma { margin: 30px 0 30px calc(50% - 593px); width: 1000px; height: 600px; background: url('https://638183.freep.cn/638183/t24/webp2/awu.webp') no-repeat center/cover; position: relative; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#mplayer { position: absolute; bottom: 20px; left: 20px; }
#mplayer text { fill: silver; }
#mplayer circle { opacity: .7; }
#mplayer use { fill: #eee; }
#lrc { top: 20px; }
#fsbtn { bottom: 20px; }
</style>
<div id="ma" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=209634" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/17/18/03/video63662a4bd0ee7.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 fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/circle_lrc.js';
var gcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(ma, gcAr);
fscreen.fs('ma', 'fsbtn');
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖，测试新写的圆环播放控制器模块。这个播放器过去有一个完整插件，现在这个是不是移植，是全新的实现机制。导入模块之后，它可以：
或做纯音乐贴：hcplay(ma); //其中, ma 是帖子容器 id 标识符但不要引号，下同
或做歌词同步：hcplay(ma, lrcAr); //lrcAr 为花潮lrc格式歌词数组
做歌词同步帖时，还需要帖子容器下存在 id="lrc" 的子容器。
配置极简，但是需要一些CSS、HTML配套结构，不太复杂，详情可分析帖子代码。
另，圆环播放器id标识符为 mplayer，可以参照 5-8 行代码设置相应CSS样式。 小天后蔡依林！~~ 白天没听到音乐，这会听来节奏感好强啊，非常欢快~~歌名特别，这个词组也是绝了。。 audlrc.css?v=1.1这个CSS插件应该是做了升级。。
看到歌词也被封进去了，只留一个位置设置。
看到圆环形小播的设置，也只留了位置，文字和圆环填充色等，好简洁啊。{:4_199:} 本帖最后由 花飞飞 于 2024-11-27 19:23 编辑
circle_lrc.js这个圆环播放器插件是新出现的，
代替了之前的细线型小播，感觉这么变化一下更有意思。。
盲猜不同小播得有十八个左右。。。是不是呢{:4_170:} 马黑黑 发表于 2024-11-27 12:07
本帖，测试新写的圆环播放控制器模块。这个播放器过去有一个完整插件，现在这个是不是移植，是全新的实现机 ...
这个全新机制得重新写代码吧。。这个工程够大的。。
原来纯音和歌词同步这么方便就可以切换，
给白老师多点大赞。。{:4_174:} 蔡依林很久没出来了 css封装加js的圆环歌词封装的搭配，让代码变得十分简洁和便于操作，这个太棒了{:4_199:} 愤怒的葡萄 发表于 2024-11-27 12:38
小天后蔡依林！~~
{:4_181:} 花飞飞 发表于 2024-11-27 19:12
白天没听到音乐，这会听来节奏感好强啊，非常欢快~~歌名特别，这个词组也是绝了。。
{:4_172:} 花飞飞 发表于 2024-11-27 19:17
audlrc.css?v=1.1这个CSS插件应该是做了升级。。
看到歌词也被封进去了，只留一个位置设置。
看到圆环形 ...
保证HTML结构配套，再用CSS自定义自己的风格，这样就会很简洁 花飞飞 发表于 2024-11-27 19:20
circle_lrc.js这个圆环播放器插件是新出现的，
代替了之前的细线型小播，感觉这么变化一下更有意思。。
...
类似的圆环播放器之前是有的 绿叶清舟 发表于 2024-11-27 19:39
蔡依林很久没出来了
好像是说过错话吧，被俺们冷落了一段时间 红影 发表于 2024-11-27 19:54
css封装加js的圆环歌词封装的搭配，让代码变得十分简洁和便于操作，这个太棒了
还行的吧？封装的匆忙，也不知有啥问题木有 这个还可以选择做纯音乐还是做带歌词同步，这个封装可选的很方便呢。
“做歌词同步：hcplay(ma, lrcAr); //lrcAr 为花潮lrc格式歌词数组”，这里用的是hcplay(ma, gcAr);吧，看歌词也是用的var gcAr = [。。。可以用lrcAr么，是不是封的时候就是gcAr？ 刚看到帖子时，以为歌手后面的是舞台背景呢，仔细一看原来是其他伴舞的美女组成的{:4_173:} 又是种简便的封装代码。黑黑辛苦了{:4_187:}{:4_190:} 红影 发表于 2024-11-27 20:00
这个还可以选择做纯音乐还是做带歌词同步，这个封装可选的很方便呢。
“做歌词同步：hcplay(ma, lrcAr); / ...
歌词你得提供一个变量，什么变量没关系，提供和你事先声明的一致就行