醉
本帖最后由 阿狄丽娜 于 2023-3-10 20:42 编辑 <br /><br /><br><br><br><br><br><br><br><br><br><br><br><br><style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1200px; height: 640px; background: tan url('https://www.kumeiwp.com/sub/filestores/2023/03/10/c8f12c4ba9874ecaeeb39d5d1411e92e.jpg') 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>
<br><br><br>
本帖最后由 阿狄丽娜 于 2023-3-9 22:10 编辑 <br /><br />谢谢马黑黑提供歌曲
图片制作很漂亮。欣赏娜娜好图。{:4_187:}
二楼看到了月亮和缩小的一个小图。娜娜可以将自己的图片替换到黑黑的代码里，就可以有漂亮的音画帖子了，这样直接缩小代码，效果就出不来了{:4_173:} 红影 发表于 2023-3-9 19:14
图片制作很漂亮。欣赏娜娜好图。
二楼看到了月亮和缩小的一个小图。娜娜可以将自己的图片替换到 ...
没找到地方啊！{:4_170:} 蕾西了，吃饭去了。 烤鸡腿在等我{:4_200:} 好漂酿的制作！高手 马黑黑 发表于 2023-3-9 19:29
好漂酿的制作！高手
可惜手机听不懂到 阿狄丽娜 发表于 2023-3-9 19:38
可惜手机听不懂到
手机也不是不可以。一般的情况是酱紫：手机浏览器为了照顾客户流量，有可能不支持自动播放。为此，我们有必要给帖子放置一个播放控制器，这就是我为什么一直致力于做音频帖子按钮的原因之一。 马黑黑 发表于 2023-3-9 19:41
手机也不是不可以。一般的情况是酱紫：手机浏览器为了照顾客户流量，有可能不支持自动播放。为此，我们有 ...
这个主意好 阿狄丽娜 发表于 2023-3-9 19:45
这个主意好
{:4_181:} 醉美水芙蓉 发表于 2023-3-9 20:14
做得漂亮！
谢谢醉美水芙蓉！我学着弄那！ 娜娜是做了一个图图？黑黑老师的代码套用一下试试效果 小辣椒 发表于 2023-3-9 22:02
娜娜是做了一个图图？黑黑老师的代码套用一下试试效果
刚套了 阿狄丽娜 发表于 2023-3-9 22:12
刚套了
哦，完成了啊。我去看看 阿狄丽娜 发表于 2023-3-9 22:12
刚套了
娜娜的代码看了，你会代码的，但套用的最上面没有领会黑黑老师套用的源码，你加了这么多<br>不需要的，直接修改margin: -80px 的数值就可以了 小辣椒 发表于 2023-3-9 22:21
娜娜的代码看了，你会代码的，但套用的最上面没有领会黑黑老师套用的源码，你加了这么多不需要的，直接修 ...
我蒙的，明天改吧！看着上下太紧张了，就加了。很久不玩了，快忘光了。 阿狄丽娜 发表于 2023-3-9 22:47
我蒙的，明天改吧！看着上下太紧张了，就加了。很久不玩了，快忘光了。
没事，你有代码基础，学习快的 月亮、小醉鬼和歌声都有了，但没画面。
页:
[1]
2