爱无赦

凡哥

HCPlayer

凡哥

代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css?v=1.1';
	#ma { margin: 30px 0 30px calc(50% - 602px); 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>

凡哥

circle_lrc 模块配置极简：

做纯音乐帖子时 ：hcplay(帖子容器); 如本帖的 hcplay(ma); ，ma 是帖子容器的id标识符
做歌词同步帖时 ：hcplay(帖子容器, 花潮格式歌词数组); ，如本帖的 hcplay(ma, gcAr); ，gcAr 是事先声明好的变量名称

模块需要一些CSS+HTML结构的配套，详情可以分析本帖代码

扬帆

匠心独运、视听盛宴，饕餮大餐，谢谢凡哥老师深度分享

柒玥

好听的歌，好看的图，谢谢凡哥老师精彩分享！

花简静

凡哥 发表于 2024-11-27 12:17
circle_lrc 模块配置极简：

做纯音乐帖子时 ：hcplay(帖子容器); 如本帖的 hcplay(ma); ，ma 是帖子容器的 ...

纯音和有歌词的有所区分，很细致的设计

花简静

CSS部分的插件做了升级，大多数设置都在封装里，看上去更加简洁。。

花简静

circle_lrc.js这个圆环播放器插件是新出现的，把之前的线型进度条改成了圆环，以后还有更多可能

令狐冲

好听，好看。。。