爱无赦

马黑黑

HCPlayer

马黑黑

代码

<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 = [
	[3,"蔡依林 - 爱无赦",4],
	[16.8,"作词 : 陈镇川",2.7],
	[20.45,"作曲 : Adam Powers/Lina Rafn/Paw Lagermann",2.3],
	[30.7,"编曲 : 小安",32.9],
	[39.65,"黑暗中牵着手",1.8],
	[42.03,"我在搜索 谁还躲得偷偷摸摸",3.2],
	[46.87,"你的爱要自由",2.1],
	[49.35,"只要温柔 能被感受便已足够",3.0],
	[53.03,"老掉牙的枷锁",3.1],
	[56.57,"幸福不是 循规蹈矩就能拥有",3.3],
	[60.26,"今晚的爱无赦",3.0],
	[63.34,"就别在啰哩啰嗦",1.8],
	[65.1,"唯唯诺诺 畏畏缩缩",1.8],
	[66.94,"Go Go Sister",1.5],
	[68.8,"Go Go Brother",1.6],
	[71.07,"爱情大同 天下为公",3.0],
	[74.13,"Go Go lover",1.6],
	[76.03,"Bravo lover",2.2],
	[78.35,"酸甜苦乐 真爱无赦",2.9],
	[81.45,"You Are My lover",2.4],
	[112.6,"太阳下亲吻我",1.8],
	[114.72,"我有把握 就连石头都会感动",3.2],
	[119.86,"不必对谁负责",1.9],
	[121.98,"你的执着 要比他们都还长寿",3.5],
	[125.9,"世界 快速转动",3.1],
	[129.27,"是对是错 不过只是一个念头",3.4],
	[133.18,"赶上 我的节奏",2.6],
	[136.21,"在我的王国 你的感觉",1.9],
	[138.1,"可以大声嘶吼",1.5],
	[139.74,"Go Go Sister",1.5],
	[141.51,"Go Go Brother",1.5],
	[143.8,"爱情大同 天下为公",3.0],
	[146.9,"Go Go lover",1.5],
	[148.74,"Bravo lover",2.0],
	[151.02,"酸甜苦乐 真爱无赦",3.0],
	[154.2,"You Are My lover",2.4],
	[176.2,"You Are My Lover",2.4],
	[198.09,"Go Go Sister",1.5],
	[199.77,"Go Go Brother",1.5],
	[201.97,"爱情大同 天下为公",3.0],
	[205.06,"Go Go lover",1.6],
	[206.96,"Bravo lover",2.2],
	[209.23,"酸甜苦乐 真爱无赦",3.0],
	[212.42,"You Are My lover",2.4],
	[216.28,"You Are My Lover",3.4],
	[219.86,"Go Go Sister",1.4],
	[221.62,"Go Go Brother",1.5],
	[223.35,"You Are My Lover",3.0]
];

hcplay(ma, gcAr);
fscreen.fs('ma', 'fsbtn');

</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插件应该是做了升级。。
看到歌词也被封进去了，只留一个位置设置。
看到圆环形小播的设置，也只留了位置，文字和圆环填充色等，好简洁啊。

花飞飞

circle_lrc.js这个圆环播放器插件是新出现的，
代替了之前的细线型小播，感觉这么变化一下更有意思。。
盲猜不同小播得有十八个左右。。。是不是呢

花飞飞

马黑黑 发表于 2024-11-27 12:07
本帖，测试新写的圆环播放控制器模块。这个播放器过去有一个完整插件，现在这个是不是移植，是全新的实现机 ...

这个全新机制得重新写代码吧。。这个工程够大的。。
原来纯音和歌词同步这么方便就可以切换，
给白老师多点大赞。。

绿叶清舟

蔡依林很久没出来了

红影

css封装加js的圆环歌词封装的搭配，让代码变得十分简洁和便于操作，这个太棒了

马黑黑

愤怒的葡萄 发表于 2024-11-27 12:38
小天后蔡依林！~~

马黑黑

花飞飞 发表于 2024-11-27 19:12
白天没听到音乐，这会听来节奏感好强啊，非常欢快~~歌名特别，这个词组也是绝了。。

马黑黑

花飞飞 发表于 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？

红影

刚看到帖子时，以为歌手后面的是舞台背景呢，仔细一看原来是其他伴舞的美女组成的

红影

又是种简便的封装代码。黑黑辛苦了

马黑黑

红影 发表于 2024-11-27 20:00
这个还可以选择做纯音乐还是做带歌词同步，这个封装可选的很方便呢。
“做歌词同步：hcplay(ma, lrcAr); / ...

歌词你得提供一个变量，什么变量没关系，提供和你事先声明的一致就行