致你

马黑黑 · 发表于 2025-1-12 21:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

HCPlayer

马黑黑 · 发表于 2025-1-12 21:01

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
	#tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/yihv.webp') no-repeat center/cover; }
	#fsbtn { top: 20px; }
	#lrc { bottom: 20px; }
	#mplayer { left: 100px; width: 240px; height: 240px; display: grid; place-items: center; }
	.feather { position: absolute; width: 40px; height: 120px; background: url('https://638183.freep.cn/638183/small/f1.png') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1867217766"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="mplayer" class="mplayer"></div>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
	import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
	var lrcAr = [[2.0,"致你（演唱 ：yihuik苡慧）",3.1],[10.9,"作词 : 周萌",1.8],[12.75,"作曲 : 郭子阳",2.2],[16.96,"编曲 : 周智旭",9.4],[18.33,"恋恋不舍又念念不忘",4.0],[22.3,"被汹涌浪潮淹没",3.0],[26.11,"覆盖了属于我",2.4],[28.48,"最孤独的海洋",2.2],[30.67,"迷茫的游荡",3.7],[34.36,"不知去往何方",1.6],[35.94,"支离破碎",2.0],[38.21,"或遍体鳞伤",1.9],[40.09,"研磨成匆匆过往",3.2],[43.59,"一幕幕的相逢",2.6],[46.22,"都不甘于平庸",2.3],[48.48,"原谅我此番",3.4],[52.08,"不经意的设防",1.6],[53.69,"跌跌宕宕",2.3],[55.94,"你占据我的遐想",2.2],[58.09,"封上你路过的窗",3.1],[61.68,"你的声音",1.8],[63.63,"来来往往",1.8],[65.77,"穿梭在无人演出的剧场",4.4],[70.27,"若想念是凋谢的云",2.8],[73.05,"乘着风也飘向你",2.0],[75.1,"降落在你耳边低语",4.1],[79.22,"像沉默的打字机",2.7],[81.87,"满怀热烈情绪",2.3],[84.21,"写不出会别离太爱你",3.2],[87.38,"到最后",0.2],[87.56,"我只好小心翼翼",3.2],[90.78,"尝试着偷偷靠近",2.1],[92.89,"触碰你那透明的心",4.3],[97.17,"猜你启封的表情",2.3],[99.48,"只敢写下开篇的",2.5],[102.09,"致你",2.7],[125.19,"恋恋不舍又念念不忘",3.8],[129.04,"被汹涌浪潮淹没",3.3],[132.32,"覆盖了属于我",2.7],[135.02,"最孤独的海洋",2.3],[137.36,"迷茫的游荡",3.8],[141.18,"不知去往何方",1.5],[142.64,"支离破碎",2.0],[144.88,"或遍体鳞伤",1.9],[146.74,"研磨成匆匆过往",3.2],[150.48,"一幕幕的相逢",2.4],[152.91,"都不甘于平庸",2.3],[155.21,"原谅我此番",3.4],[158.72,"不经意的设防",1.6],[160.32,"跌跌宕宕",2.2],[162.47,"你占据我的遐想",2.2],[164.7,"封上你路过的窗",3.1],[167.94,"你的声音",1.8],[170.11,"来来往往",1.8],[172.57,"穿梭在无人演出的剧场",4.2],[177.13,"若想念是凋谢的云",2.5],[179.63,"乘着风也飘向你",2.1],[181.71,"降落在你耳边低语",4.2],[185.88,"像沉默的打字机",2.6],[188.48,"满怀热烈情绪",2.1],[190.62,"写不出会别离太爱你",3.4],[194.06,"到最后",1.2],[195.22,"我只好小心翼翼",2.2],[197.4,"尝试着偷偷靠近",2.1],[199.47,"触碰你那透明的心",4.0],[203.69,"猜你启封的表情",2.4],[206.14,"只敢写下开篇的",2.3],[209.11,"致你",2.0],[212.56,"若想念是凋谢的云",2.6],[215.14,"乘着风也飘向你",2.1],[217.26,"降落在你耳边低语",4.2],[221.47,"像沉默的打字机",2.5],[223.95,"满怀热烈情绪",2.4],[226.38,"写不出会别离太爱你",3.5],[229.83,"到最后",1.2],[231.01,"我只好小心翼翼",1.9],[232.86,"尝试着偷偷靠近",2.2],[235.05,"触碰你那透明的心",4.1],[239.11,"猜你启封的表情",2.5],[241.64,"只敢写下开篇的",2.4],[244.46,"致你",2.0]];
	var total = 9, a = 360 / total;
	for(var i = 0; i < total; i++) {
		var f = document.createElement('span');
		f.className = 'feather';
		f.style.cssText += `transform: rotate(${i * a}deg) translateY(-60px);`;
		mplayer.appendChild(f);
	}
	hcplay(tz, lrcAr);
	fscreen.fs(tz, fsbtn);
</script>

马黑黑 · 发表于 2025-1-12 21:06

本帖演示随意按钮模块的LRC版本。

按钮是随意的，可以一个，可以多个，class="mplayer" 的HTML标签都会纳入音频控制管理范畴。本帖是一个复合性质的按钮：按钮内有自己的子元素，这些子元素就是背景图为羽毛图案的 span标签，它们组成了一个按钮图案，复元素 #mplayer 将其包裹起来。如果不需要这些复合图案，可以简单地用 img 标签做按钮，酱紫的话，22-28行代码不要，7行代码不要，14行代码改为 img 标签即可。