醉
本帖最后由 马黑黑 于 2023-3-9 12:35 编辑 <br /><br /><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 = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;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 * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);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;lrc.dataset.lrc = lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);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 = `黄龄 - 醉\n床前明月光\n疑似地上霜\n举头望明月\n低头思故乡\n微风吻枝桠\n撩拨着心房\n朝朝暮暮情\n久久不能忘\n月在水中央\n心随之荡漾\n一步一缅想\n寸寸皆断肠\n回首来时路\n隔世两茫茫\n生如一壶茶\n离若一抹香\n歌笙尽\n音犹在\n人去了\n空伤感\n花开花落\n独自如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌\n床前明月光\n疑似地上霜\n举头望明月\n低头思故乡\n回首来时路\n隔世两茫茫\n生如一壶茶\n离若一抹香\n\n歌笙尽\n音犹在\n人去了\n空伤感\n花开花落\n独自如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌\n\n寂寞的倒影还在心头\n红颜变成了白首\n笙箫烟雨青山梦还游荡在心中\n明月照亮了天\n我模糊了双眼\n谁的影子划过天空中的云烟\n又是月儿圆\n我把酒问青天\n为何思念的痛看似遥遥无终点\n空寂的房间\n我闭上了双眼\n如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌`;
let lrcAr = getLrcAr(geci);
</script>
本帖最后由 马黑黑 于 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 = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;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 * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);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;lrc.dataset.lrc = lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);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 = `黄龄 - 醉\n床前明月光\n疑似地上霜\n举头望明月\n低头思故乡\n微风吻枝桠\n撩拨着心房\n朝朝暮暮情\n久久不能忘\n月在水中央\n心随之荡漾\n一步一缅想\n寸寸皆断肠\n回首来时路\n隔世两茫茫\n生如一壶茶\n离若一抹香\n歌笙尽\n音犹在\n人去了\n空伤感\n花开花落\n独自如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌\n床前明月光\n疑似地上霜\n举头望明月\n低头思故乡\n回首来时路\n隔世两茫茫\n生如一壶茶\n离若一抹香\n\n歌笙尽\n音犹在\n人去了\n空伤感\n花开花落\n独自如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌\n\n寂寞的倒影还在心头\n红颜变成了白首\n笙箫烟雨青山梦还游荡在心中\n明月照亮了天\n我模糊了双眼\n谁的影子划过天空中的云烟\n又是月儿圆\n我把酒问青天\n为何思念的痛看似遥遥无终点\n空寂的房间\n我闭上了双眼\n如梦如归\n醉\n我独自对酒当歌\n醉\n我独自对酒当歌`;
let lrcAr = getLrcAr(geci);
</script>
本帖最后由 马黑黑 于 2023-3-9 19:39 编辑
简单说明：
帖子使用视频+画布做音频播放控制器按钮，就是那个鼎鼎大名的小醉鬼，它是从论坛集成的GIF图片转成了MP4，50KB。视频上传了几个地方，却无法使用，包括上传到我的网盘的也用不了，国外的免登空间本地测试能用，到了论坛刷不出来，最后只能传酷美，酷美可以。
视频通过canvas画布帧帧拆解，这个我们已经介绍过。然后，音乐暂停之时，视频就停留在当前动作。本帖想演示的就是这个效果。
也可以直接使用视频做做按钮，绕过画布。但通过画布可以将视频元素隐藏起来，且其他必要的修饰可能更容易做一些。
哈哈，草地那个小玩意挺可爱的。 庶民 发表于 2023-3-9 12:42
哈哈，草地那个小玩意挺可爱的。
{:5_106:} 黑黑你太神了，居然用视频做按钮{:4_178:} 意境美美的，黑黑这个创意小辣椒惊呆了，估计红影 老头会特别喜欢{:4_170:} 太美了，这韵律，这意境，这情感，用柔柔小声音把俺听感动了。{:4_206:} 又是一总功法密笈，脑洞开了好大好大{:4_173:} 欣赏佳作，问候黑君。 原来那个小醉鬼被做了视频，还以为是动图呢{:4_173:} 这个月牙还是代码月亮{:4_187:}呢，漂亮 小辣椒 发表于 2023-3-9 13:54
意境美美的，黑黑这个创意小辣椒惊呆了，估计红影 老头会特别喜欢
是啊，我也挺喜欢使用视频做元素，就怕你看不到啊{:4_173:} 谢谢楼主分享！真好听。 阿狄丽娜 发表于 2023-3-9 16:07
谢谢楼主分享！真好听。
{:4_208:} 音乐好听。黄龄的嗓音十分独特{:4_187:} 这是论坛示范{:4_173:}视频当小播，也是新的 小辣椒 发表于 2023-3-9 13:52
黑黑你太神了，居然用视频做按钮
这个要拍拍脑袋才能想出来{:4_170:} 小辣椒 发表于 2023-3-9 13:54
意境美美的，黑黑这个创意小辣椒惊呆了，估计红影 老头会特别喜欢
{:4_205:} 樵歌 发表于 2023-3-9 15:33
太美了，这韵律，这意境，这情感，用柔柔小声音把俺听感动了。
这个可以听上几遍