瞳

凡哥

HCPlayer

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
	#tz { --state: running; margin: 30px 0 30px calc(50% - 731px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp3/tong.webp') no-repeat center/cover; }
	#player { position: absolute; width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
	#mypic { width: 100%; height: 100%; opacity: .75; }
	#prog { bottom: 30px; width: 280px; --bg1: silver; --bg2: lightblue; --color: lightblue; }
	#lrc { top: 30px; }
	#fsbtn { bottom: 60px; }
	@keyframes in1 {
		0% { width: 0; height: 0; transform: rotate(0); }
		60% { width: 100%; height: 100%; transform: rotate(-720deg) }
		90% { width: 100%; height: 100%; transform: rotate(-720deg); }
		100% { width: 0; height: 0; transform: rotate(0); }
	}
	@keyframes in2 {
		0% { width: 0; height: 0; transform: rotate(0); }
		60% { width: 100%; height: 100%; transform: rotate(720deg) }
		90% { width: 100%; height: 100%; transform: rotate(720deg); }
		100% { width: 0; height: 0; transform: rotate(0); }
	}
</style>

<div id="tz" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2653052898"></audio>
	<div id="player"><img id="mypic" src="https://638183.freep.cn/638183/t24/webp3/t1.webp" alt="" /></div>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="prog" class="prog" data-tt="00:00 00:00"></div>
	<div id="fsbtn" class="fsbtn"></div>
</div>

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';

var lrcAr = [
	[2.08,"KIAH - 瞳",7.5],
	[11,"作曲 Composed by : 雷雨心",2.6],
	[14.13,"作词 Lyrics by : 雷雨心",1.1],
	[15.22,"睁开眼 无论是黑夜或白天",3.6],
	[22.09,"光所及之处 便是她灵魂呼唤的地点",4.6],
	[28.79,"一刻都 不该等待",2.5],
	[31.25,"犹豫不决是对生命最大 的浪费",3.8],
	[36,"鼓动的 那颗心最明白这燃烧是为谁",4.8],
	[43.48,"她已做好准备",3.2],
	[46.72,"是盛放或凋毁 就算燃尽成灰",3.4],
	[50.15,"她交出 执着的所有",4.5],
	[57.08,"她知道她已做好准备",4.1],
	[61.15,"是天堂或深渊",1.7],
	[62.89,"凝视她的双眼",1.7],
	[64.55,"烧的火热 烧得漆黑 的瞳",4.8],
	[72.33,"Ah ah ah",4.7],
	[77.07,"Ah ah ah",6.9],
	[86.35,"赐我 所有光与热 眼泪与伤痕",5.0],
	[93.19,"共我 缱绻或离分 热烈或悔恨",5.4],
	[100.12,"不能成全我 那就毁掉我",4.8],
	[107.46,"不能完满我 那就撕碎我",4.8],
	[115.57,"Ah ah ah",6.7],
	[122.69,"Ah ah ah",6.9],
	[130.91,"她的瞳 是镶进最深夜的黑",3.8],
	[138.08,"她的痛 是狂欢之神的酒杯",3.8],
	[145.3,"烧的火热 烧得漆黑 的瞳",8.1],
	[159.9,"注视你 注视我",3.7],
	[166.93,"注视你 注视我",4.3],
	[174.19,"注视你 注视我",4.1],
	[181.45,"注视你 注视我",4.0]
];

var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);

var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];

var picAr = [
	'https://638183.freep.cn/638183/t24/webp3/t1.webp',
	'https://638183.freep.cn/638183/t24/webp3/t2.webp',
	'https://638183.freep.cn/638183/t24/webp3/t3.webp',
	'https://638183.freep.cn/638183/t24/webp3/t4.webp',
];

var showPics = (pics) => {
	mypic.src = pics[picIdx];
	mypic.style.animation = `${anis[picIdx % 2]} ${gapTime}ms forwards var(--state)`;
	picIdx = (picIdx + 1) % pics.length;
};

setInterval( () => {
	if(!aud.paused) showPics(picAr);
}, gapTime);

showPics(picAr);
</script>

花简静

这个是白老师用最新的图片轮播效果当小播，加上细线进度条，还有歌词，全屏合并一体的全音画效果。。

花简静

看了插件，当然还有视频动态，如果需要可以自己加上。。。
每个部分都可以灵活自行更改或者默认
当然也可以根据需要添加和去掉。

花简静

背景图片颜色清爽宜人，进度条色彩也搭得漂亮。。
点击六边形小播可以使所有动态暂停。。
400*400大小可以更改。。
关键是里面轮播的几张图片，可以更换为自己需要的图片。

凡哥

aud_lrc模块支持发纯音帖、LRC歌词同步帖。发纯音帖时，第 68 行代码，var audio = new Aud(tz, player, lrcAr); ，小括号里的第三个参数不要，写成 var audio = new Aud(tz, player); 即可。同时，lrc歌词变量 lrcAR 的声明自然也不要，还有对应的 HTML代码第 26 行不要、CSS代码第 7 行不要。

模块配套的CSS资源（第2行）附带包括帖子容器在内的相关CSS属性设置，均已 .选择器 完成，HTML代码对应标签有 class=“xxx” 的就是使用该资源的设置，不多，也就是四、五个（本帖没有视频标签，若有，class="vid" 是使用资源设置的样式，也可以不使用资源的设置，自己另外设置样式）。

花简静

歌曲特别，第一次听。。
四张异瞳图片令人感觉有点哥特式的恐怖。。

凡哥

图片轮播效果使用变换 img 标签的 src 属性实现，JS代码在 68-91 行，HTML代码在 25 行，CSS代码 4-5行、9-20行。

花简静

凡哥 发表于 2024-12-15 21:43
aud_lrc模块支持发纯音帖、LRC歌词同步帖。发纯音帖时，第 68 行代码，var audio = new Aud(tz, player, lr ...

这个好，也是可以不用歌词的，简单更改即可。。
老师辛苦

花简静

凡哥 发表于 2024-12-15 21:46
图片轮播效果使用变换 img 标签的 src 属性实现，JS代码在 68-91 行，HTML代码在 25 行，CSS代码 4-5行、9- ...

看到地址啦，如果需要更换地址即可。。图片张数应该没有限制吧。