世界之外 - 青山如昨

凡哥

HCPlayer

凡哥

帖子代码

<style>
	@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
	#mama { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 800px; background: black url('https://638183.freep.cn/638183/t24/5/qkuj.jpg') no-repeat center/ cover; }
	#player { width: 60px; height: 60px; bottom: 35px; animation: flash 4s linear infinite var(--state), rot 8s linear infinite var(--state); }
	#player:hover { filter: hue-rotate(180deg); transition: .7s; }
	#prog { bottom: 30px; width: 300px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
	#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
	#lrc { top: 65%; color: lightgreen; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
	#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
	#fsbtn { position: absolute; top: 20px; color: lightgreen; padding: 2px 6px; border: 2px solid lightgreen; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
	@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=2646858693"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/53/11/video636400070365e.mp4" autoplay loop muted></video>
	<span id="fsbtn"></span>
	<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
	<img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/jupm.svg" alt="" />
	<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';
	var lrcAr = [[2.93,"青山如昨",8.4],[11.33,"歌手 世界之外",6.9],[18.21,"作词 Lyricist：璇子",1.5],[19.74,"作曲 Composer： AST",2.2],[21.97,"制作人 Producers：张光磊/ AST",3.1],[25.03,"编曲 Arrangement： AST/张光磊",1.6],[26.61,"曾记得晚秋夜色",3.5],[32.83,"共走过身影交错",4.0],[38.85,"千山尽染白雪落",4.0],[43.44,"青山如昨",2.4],[51.54,"林花谢春红零落",3.8],[57.68,"太匆匆问几时重",3.8],[64.08,"怦然心动泡影如梦",3.8],[68.12,"不舍也就不得",6.0],[76.18,"浮世灿烂非我所愿",3.9],[82.3,"人间繁华俱归黄土",4.1],[88.5,"万里雁去与你同归",4.0],[93.04,"谁解我同宿命纠葛",6.4],[101.05,"上叩天命下问黄泉",4.1],[107.09,"我独不知己命在何",4.9],[113.32,"年华易老情深不寿",4.2],[118,"是我无情又执着",5.8],[148.17,"缘分如指间流沙",3.6],[154.29,"越紧握越易流散",3.9],[160.51,"三生石上自写前缘",4.0],[164.81,"奈何桥畔等我",5.7],[172.56,"朔风凛冽雪落寒彻",4.1],[178.81,"叩问神佛因缘何错",4.5],[184.98,"若命运说乱了因果",4.4],[189.74,"我宁愿就将错就错",6.5],[197.63,"天道无情偏我执着",4.3],[203.7,"年华往复一如初见",5.5],[209.93,"想同你看青山白首",4.2],[214.63,"岁月不老你和我",7.1],[235.51,"伴你走",1.4],[237.44,"此生白首",2.1],[241.53,"还想要来生不舍",3.7],[247.76,"谁解我宿命纠葛",3.9],[253.81,"是为何",1.5]];
	var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
	var audio = new Aud(mDatas);
	audio.play();
	fscreen.fs('mama', 'fsbtn');
</script>

扬帆

青翠的画面，悦耳的曲子，视听的盛宴，谢谢凡哥老师精彩分享

扬帆

请问凡哥老师，同步歌词中的方括号内，

前后两个数字分别是什么含义呀，如何获得呢？

比如：[197.63,"天道无情偏我执着",4.3]，197.63？4.3？

一鹿向北

好新的曲子啊，感谢推荐。

花简静

这个是昨天音画模板的升级版，多加了全屏代码。
歌词使用的也是花潮格式，可以自己制作。
贴子画面清晰唯美，全屏效果更是震撼。。

花简静

此贴包含音乐，画面，动态视频，歌词，进度条，全屏功能。。
是目前最完整的音画结构。。

花简静

本来要实现这些功能需要大量的代码来完成。
凡哥老师进行了封装，用了三个插件把原本大量的代码打包好，直接引用即可。。
比如点击小播可使音乐暂停，视频暂停，进度条暂停，小播本身转动暂停等，这些实现自动完成。。
非常方便

花简静

在这些基础上，又留了个性化的设置，
背景更换，视频可更换，小播图片可更换，歌词颜色大小等可更换，全屏按纽色彩可更换，进度条颜色和时间文字可更换。。
这些可以更改，更好的为音画贴子服务。。
非常棒的设计。

回归

凡哥出手，必定不凡。