[特效音画] 瞳

马黑黑 · 发表于 2024-12-15 13:07

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

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

x

本帖最后由马黑黑于 2024-12-15 13:58 编辑

HCPlayer

马黑黑 · 发表于 2024-12-15 13:08

本帖最后由马黑黑于 2024-12-15 13:58 编辑

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
	#tz { --state: running; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://x0.ifengimg.com/ucms/2021_35/30BF26A6959B8DB5752F8520F9A6BFF04F55A735_size762_w1135_h665.png') 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>

马黑黑 · 发表于 2024-12-15 13:43

本帖：

一、将简易图片轮播第三版用于帖子

图片标签放置于 id="player" 的容器中，该容器同时充当播放控制按钮。多个图片以更换 img 标签的 src 属性值轮番上场，同时运行 CSS 关键帧动画。

这些都在帖子前台完成。

二、aud_lrc模块

此模块是之前 audiolrc 模块的简化版，简化的内容是配置层面，最多只需 3 个参数（带lrc同步），最少 2 个参数（不带lrc同步）。import 模块（代码第32行）之后，使用一个自定义变量实例化 Aud 对象（代码68行），在这里根据情况给出参数：参数1是帖子容器，参数2是按钮，参数3可缺省（缺省表示不使用LRC歌词同步功能，若需要配置，需事先声明花潮格式的数组变量，再用该变量作为参数）。

三、配套的CSS前台设置和HTML代码结构

（一）帖子容器：设置margin定位、宽高尺寸、背景图片以及自己需要的属性。配套的HTML id 可自定义，可加入 class="pa" 以启用模块配套的CSS资源设置；

（二）按钮：自行设计，模块配套的CSS资源没有提供任何设置（但有一个 rot 关键帧动画可调用，旋转360度）。HTML代码中要有该按钮标签；

（三）进度条：是 div 或 span 标签为好，该标签CSS配套资源提供了基本样式，利用背景、两个伪元素营建了进度条的基本功能，CSS变量 --bg1 是进度条底轨色、--bg2 是进度指示色、--color 是文本颜色。HTML进度条标签应有属性 class="prog"；

（四）lrc ：可以使用 div 或 span 标签，建议前者。设置方法请参考其他模块说明，注意 HTML 代码需要 class="lrc" 以启用CSS配套资源的设置；

（五）全屏按钮：这是独立模块，但CSS配套资源有它的样式设置。不使用时去除对应的CSS前台代码、JS的引用和代码中的第 70 行。