心型圈

凡哥

HCPlayer

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
	#mama { margin: 30px 0 30px calc(50% - 690px); width: 1200px; height: 720px; background: black url('https://638183.freep.cn/638183/t24/webp2/cyl.webp') no-repeat center/ cover; }
	#player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
	#player:hover { opacity: .6; }
	#prog { bottom: 20px; width: 280px; --bg1: white; --bg2: lightblue; --color: white; }
	#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
	#lrc { top: 30px; color: lightblue; --bg: linear-gradient(rgba(0,250,250,.05),rgba(0,250,250,.75)); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	svg { position: absolute; }
	#fsbtn { position: absolute; bottom: 20px; right: 30%; color: lightblue; padding: 2px 6px; border: 2px solid lightblue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; z-index: 9; }
	use { transform-box: fill-box; transform-origin: center; animation: move var(--dur) var(--delay) linear infinite var(--state); }
	@keyframes move { to { transform: rotate(var(--deg)) translate(var(--xx)); } }
	@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>

<div id="mama" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=209722"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/02/45/46/video6362bada8cb97.mp4" autoplay loop muted></video>
	<span id="fsbtn" class="fsbtn"></span>
	<svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"></svg>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

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

var dr = Dr.dr('msvg');
dr.symbol('sy1', '-200 -200 400 400');
dr.path('M0 -100 C350 -300,100 0,0 180 C-100 0,-350 -300,0 -100', 'fuchsia').addTo('sy1');
var all = 20;
Array.from({length: all}).forEach(() => {
	var size= Math.random() * 30 + 20;
	dr.use('sy1', -100, 100, size, size).style(`filter: hue-rotate(${360 * Math.random()}deg); --delay: ${Math.random() * -12}s; --dur: ${Math.random() * 8 + 10}s; --deg: ${100 - Math.random() * 120}deg;`);
});
dr.use('#sy1', 550, 580, 100, 100).id('player');

let lrcAr = [
	[2.5,"蔡依林·心型圈",2.1],
	[10.01,"作词 : 方文山",2.7],
	[13.2,"作曲 : 詹宇豪",2],
	[15.2,"编曲 : 钟兴民",2],
	[18.6,"我送上初恋 在你的面前",3.9],
	[22.86,"再将我爱你 温习一遍",3.9],
	[27.24,"我无法收敛 对你的思念",4.1],
	[31.62,"若爱有风险 我宁愿中箭",4.1],
	[36.09,"那一年春天 爱发芽蔓延",3.8],
	[40.3,"我们故事 颜色鲜艳",3.6],
	[44.62,"我将爱完全 花在你身边",4.0],
	[49.03,"对爱纠缠很明显",2.9],
	[51.89,"想腻在你的房间",2.2],
	[54.54,"触电的瞬间 同一边",2.6],
	[57.21,"肩并着肩 黏你 脸靠着脸",3.9],
	[61.24,"看着照片 许愿",2.0],
	[63.23,"傻笑了好几遍 画十字在胸前",3.0],
	[66.49,"闭眼祈祷梦会实现",3.4],
	[70.62,"呵气在玻璃上面",1.8],
	[73.31,"画心型的圈 雾渐渐不见",3.6],
	[77.32,"你终于出现 听不进劝",3.9],
	[81.4,"对爱死心眼",1.8],
	[83.78,"希望这趟爱情走很远",4.4],
	[88.3,"我用我指尖 画心型的圈",3.9],
	[92.66,"然后碎碎念 想象你听见",4.0],
	[97.02,"空出时间 默背你的脸",3.6],
	[101.5,"认真翻字典查我们的",3.9],
	[106.22,"永远",2.9],
	[143.17,"我送上初恋 在你的面前",3.9],
	[147.49,"再将我爱你 温习一遍",3.8],
	[151.79,"我无法收敛 对你的思念",4.1],
	[156.15,"若爱有风险 我宁愿中箭",4.1],
	[160.62,"那一年春天 爱发芽蔓延",3.9],
	[164.87,"我们故事 颜色鲜艳",3.9],
	[169.25,"我将爱完全 花在你身边",4.0],
	[173.64,"对爱纠缠很明显",2.7],
	[176.29,"想腻在你的房间",2.9],
	[179.2,"触电的瞬间 同一边",2.4],
	[181.62,"肩并着肩 黏你 脸靠着脸",4.0],
	[185.88,"看着照片 许愿傻笑了好几遍 画十字在胸前",5.1],
	[191.07,"闭眼祈祷梦会实现",3.8],
	[194.9,"呵气在玻璃上面",2.2],
	[197.58,"画心型的圈 雾渐渐不见",3.9],
	[201.96,"你终于出现 听不进劝",3.8],
	[205.92,"对爱死心眼",2.0],
	[208.5,"希望这趟爱情走很远",4.3],
	[212.91,"我用我指尖 画心型的圈",3.9],
	[217.22,"然后碎碎念 想象你听见",4.0],
	[221.64,"空出时间 默背你的脸",3.8],
	[225.99,"认真翻字典查我们的",4.4],
	[231.61,"永远",3.0]
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
var resizeObserver = new ResizeObserver(() => {
	msvg.style.setProperty('--xx', mama.clientWidth + 100 + 'px');
	dr.sets({x: mama.clientWidth / 2 - 50, y: mama.clientHeight - 140});
});
resizeObserver.observe(mama);
</script>

凡哥

本帖svg动画使用 svgdr 模块做成。

（一）svgdr 教程地址：

http://mhh.52qingyin.cn/art/bsho ... rt=mahei_1730435960

（二）svgdr 文档：

http://mhh.52qingyin.cn/api/svgdr/

（三）svgdr 在线工具：

http://mhh.52qingyin.cn/api/svgdr/demo.html

svgdr 还在开发中，目前已经可以正常使用

扬帆

凡哥老师辛苦了，谢谢老师深度分享

花简静

动画复杂，本贴用了四个插件，全面为完整音画作品保驾护航。。。全面又美观。。赞叹。

花简静

全屏切换有玄机，那个漂亮的小播按纽会从远处跑回它的岗位。。
原来是98-102代码实现的~~。。

触碰小播时有点点透明度变化，这里到是不太明显。

花简静

这才是音画贴子中的顶配。。画面还是要夸一个，
不得不说这个视频的舞台效果，清晰度都比熊猫好。。
氛围感很强，舞台效果聚光灯下，万众瞩目的焦点。。
歌曲好听，歌词感人。。。深情款款。。

花简静

凡哥 发表于 2024-11-25 20:40
本帖svg动画使用 svgdr 模块做成。

（一）svgdr 教程地址：

为白老师点赞，这么复杂而庞大的工程，音画爱好者的福音。。

令狐冲

我不懂代码
但也感觉很复杂
凡哥威武
辛苦了。。。

醉美水芙蓉

老师威武，这个设计真漂亮！