京剧——锁麟囊
<style>#tz { margin: 30px 0 30px calc(50% - 781px); width: 1400px; height: 750px; background: url('https://pic.imgdb.cn/item/6671110ed9c307b7e9bfa420.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 120px; top: 650px; font: normal 25px sans-serif; white-space: nowrap; color:maroon; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>
<div id="tz">
<audio id="aud" src="https://link.hhtjim.com/163/1914690097.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/67/5ecc844c234cf.mp4" autoplay loop muted></video>
<div id="lrc">锁麟囊选段。</div>
<div id="player" data-time="00:00 00:00"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));
var lrcKey = 0;
var showLrc = () => {
if(lrcKey >= lrcAr.length) return false;
lrc.innerText = lrcAr;
lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
lrcKey ++;
};
var mState = () => {
tz.style.setProperty('--state',['running','paused'][+aud.paused]);
if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => {
for(var j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime < lrcAr) {
lrcKey = j - 1;
if(lrcKey < 0) lrcKey = 0;
break;
}
}
};
aud.ontimeupdate = () => {
player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}
player.onclick = (e) => {
if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}
player.onmousemove = (e) => {
if(e.offsetY < 0) {
if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
player.title = aud.paused ? '播放' : '暂停';
player.style.cursor = 'pointer';
}
}else{
player.title = '调节进度';
player.style.cursor = 'pointer';
}
};
let lrcAr = [
,
,
,
,
,
,
,
];
</script></td>
欣赏老师漂亮的音画佳作！{:4_199:} 让传统戏剧和代码结合起来，让国剧京剧在代码里绽放光彩，这个尝试真好{:4_199:} 好听好听，可惜，太短了点，还没听够啊。
歌词的移动两边不是等距，还可以再微调一下。
欣赏有声有色老师好帖{:4_199:} 我很喜欢李世济的锁麟囊。 梦江南 发表于 2024-6-18 14:24
欣赏老师漂亮的音画佳作！
谢谢鼓励 红影 发表于 2024-6-18 14:44
好听好听，可惜，太短了点，还没听够啊。
歌词的移动两边不是等距，还可以再微调一下。
欣赏有声有色老师 ...
音画去年学了一点，今年都没做过，昨天试了试做了一个将进酒，说实话眼睛真的不行了，看这个代码一片糊涂，还得要用放大镜，所以对字的行距只能偷懒了。 梦油 发表于 2024-6-18 15:01
我很喜欢李世济的锁麟囊。
同感 有声有色 发表于 2024-6-18 15:19
同感
你也喜欢京剧啊 有声有色 发表于 2024-6-18 15:18
音画去年学了一点，今年都没做过，昨天试了试做了一个将进酒，说实话眼睛真的不行了，看这个代码一片糊涂 ...
不一定用放大镜啊，可以用按住ctrl滑动鼠标来放大屏幕呢{:4_173:} 梦油 发表于 2024-6-18 16:18
你也喜欢京剧啊
是的， 闲暇时还能哼上几句但我比较喜欢程派 红影 发表于 2024-6-18 20:36
不一定用放大镜啊，可以用按住ctrl滑动鼠标来放大屏幕呢
还有这个功能，等会去试试谢谢了 有声有色 发表于 2024-6-19 08:24
是的， 闲暇时还能哼上几句但我比较喜欢程派
希望有机会能欣赏到有声有色朋友的唱段。 有声有色 发表于 2024-6-19 08:25
还有这个功能，等会去试试谢谢了
试过了么？把鼠标往上滚动就是放大呢{:4_173:} 梦油 发表于 2024-6-19 16:46
希望有机会能欣赏到有声有色朋友的唱段。
哈哈 我这破锣嗓子只能自我欣赏，上不了台面 红影 发表于 2024-6-19 23:27
试过了么？把鼠标往上滚动就是放大呢
我试了一下，用奥特键不行啊 有声有色 发表于 2024-6-20 09:30
哈哈 我这破锣嗓子只能自我欣赏，上不了台面
自娱自乐嘛。 有声有色 发表于 2024-6-20 09:32
我试了一下，用奥特键不行啊
按住ctrl不要松开，同时滚动鼠标滑轮，屏幕就变化了啊。
页:
[1]