[灌水] 醉

马黑黑 · 发表于 2023-3-9 12:24

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

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

x

本帖最后由马黑黑于 2023-3-9 12:35 编辑

HCPlayer

马黑黑 · 发表于 2023-3-9 12:26

本帖最后由马黑黑于 2023-3-9 12:35 编辑

帖子代码

<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: tan url('https://638183.freep.cn/638183/t23/webp/drunk.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#papa::before { position: absolute; content: ''; right: 60px; top: 20px; width: 60px; height: 60px; border-radius: 50%; background: transparent; box-shadow: 10px 15px 0 snow; }
#vid { display: none; }
#canv { position: absolute; bottom: 20px; display: block; mix-blend-mode: multiply; cursor: pointer; }
#lrc { --motion: cover2; --tt: 2s; --state: paused; position: absolute; top: 30px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(120, 30%, 50%, .25), hsla(120, 20%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<video id="vid" src="http://www.kumeiwp.com/sub/filestores/2023/03/09/87ce9eee4cc0a68ad5b76996c409993f.mp4" autoplay loop></video>
<canvas id="canv" width="100" height="96"></canvas>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1331819820" autoplay loop></audio>
</div>
<script>
let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);return(lrcTime(lrcAr));}
let mKey = 0, mFlag = true, averAdd = 0, offset = 0, cav = canv.getContext('2d');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let loop = () => {cav.drawImage(vid, 0, 0, 100, 80);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (vid.pause(), lrc.style.setProperty('--state', 'paused')) : (vid.play(), lrc.style.setProperty('--state', 'running'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('seeked', () => calcKey());
vid.addEventListener('play', loop, false);
canv.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
let geci = `[00:03:00]黄龄 - 醉\n[00:15.84]床前明月光\n[00:19.29]疑似地上霜\n[00:22.85]举头望明月\n[00:26.48]低头思故乡\n[00:30.06]微风吻枝桠\n[00:33.63]撩拨着心房\n[00:37.24]朝朝暮暮情\n[00:40.84]久久不能忘\n[00:44.40]月在水中央\n[00:47.92]心随之荡漾\n[00:51.55]一步一缅想\n[00:55.06]寸寸皆断肠\n[00:58.64]回首来时路\n[01:02.32]隔世两茫茫\n[01:05.88]生如一壶茶\n[01:09.40]离若一抹香\n[01:14.08]歌笙尽\n[01:16.13]音犹在\n[01:17.63]人去了\n[01:19.43]空伤感\n[01:22.15]花开花落\n[01:24.76]独自如梦如归\n[01:29.17]醉\n[01:40.42]我独自对酒当歌\n[01:43.52]醉\n[01:54.66]我独自对酒当歌\n[02:10.30]床前明月光\n[02:13.86]疑似地上霜\n[02:17.39]举头望明月\n[02:21.16]低头思故乡\n[02:24.65]回首来时路\n[02:28.20]隔世两茫茫\n[02:31.75]生如一壶茶\n[02:35.32]离若一抹香\n[02:38.03]\n[02:39.89]歌笙尽\n[02:41.89]音犹在\n[02:43.50]人去了\n[02:45.27]空伤感\n[02:48.04]花开花落\n[02:50.66]独自如梦如归\n[02:54.57]醉\n[03:06.13]我独自对酒当歌\n[03:09.41]醉\n[03:20.66]我独自对酒当歌\n[03:37.35]\n[03:37.55]寂寞的倒影还在心头\n[03:40.01]红颜变成了白首\n[03:41.65]笙箫烟雨青山梦还游荡在心中\n[03:45.08]明月照亮了天\n[03:46.83]我模糊了双眼\n[03:48.33]谁的影子划过天空中的云烟\n[03:52.42]又是月儿圆\n[03:53.80]我把酒问青天\n[03:55.50]为何思念的痛看似遥遥无终点\n[03:59.50]空寂的房间\n[04:00.93]我闭上了双眼\n[04:03.14]如梦如归\n[04:06.28]醉\n[04:17.86]我独自对酒当歌\n[04:21.12]醉\n[04:32.23]我独自对酒当歌`;
let lrcAr = getLrcAr(geci);
</script>

复制代码

马黑黑 · 发表于 2023-3-9 12:27

本帖最后由马黑黑于 2023-3-9 19:39 编辑

简单说明：

帖子使用视频+画布做音频播放控制器按钮，就是那个鼎鼎大名的小醉鬼，它是从论坛集成的GIF图片转成了MP4，50KB。视频上传了几个地方，却无法使用，包括上传到我的网盘的也用不了，国外的免登空间本地测试能用，到了论坛刷不出来，最后只能传酷美，酷美可以。

视频通过canvas画布帧帧拆解，这个我们已经介绍过。然后，音乐暂停之时，视频就停留在当前动作。本帖想演示的就是这个效果。

也可以直接使用视频做做按钮，绕过画布。但通过画布可以将视频元素隐藏起来，且其他必要的修饰可能更容易做一些。