日不落dj【功放音响】
本帖最后由 亚伦影音工作室 于 2024-7-20 01:46 编辑 <br /><br /><style>#papa { margin: 140px 0 20px calc(50% - 781px); width: 1400px; background:#000 url('https://')no-repeat center/cover; height: 700px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 123465; position: relative;place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 150px; height:140px;position:absolute;z-index: 1;top: 10px;left: 85%;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#jzg{width: 20px; height:14px;position:absolute;z-index: 2;left: 35%;top: 74.5%;cursor: pointer;}
#jzg::before{ width: 100%; height: 100%; position: absolute; content: '';transition: .3s; cursor: pointer; }
#jzg:hover { transform: scale(1.2); filter:hue-rotate(180deg) }
#tmsg {position: absolute;z-index: 8;font: normal 16px sans-serif;color: #ffffff;bottom: 205px; left:46%;}
#prog {position: absolute;z-index: 8;width: 37%; height: 2px;cursor: pointer;bottom: 295px;left:31.5%;border-radius: 0px;}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left: 0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: -1;}
#lrc{left: 35%;top: 35%;}#lrcc {right:35%;top: 42%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;font:normal 2em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<div id="bjbs"><img id="Img" src="https://pic.imgdb.cn/item/661b0afd68eb935713287d17.png" alt="" /></div>
<video id="vid" src="https://www.kumeiwp.com/wj/221854/2024/07/19/19d4bb11f780c957945a76c093bd1008.mp4" muted autoplay loop></video>
<div id="jzg"title="暂停/播放"><img id="dtImg" src="https://pic.imgdb.cn/item/6699a93bd9c307b7e96194f7.gif" alt="" /></div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/78/27/2c/086d6162acc01885a4b2118b2823aa6a/audio.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
本论坛js封装
00:00.100]日不落dj
天空的雾来得漫不经心
河水像油画一样安静
和平鸽慵懒步伐押着韵
心偷偷地放晴
祈祷你像英勇的禁卫军
动也不动地守护爱情
你在回忆里留下的脚印
是我爱的风景
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
爱的巴士总是走了又停
微笑望着广场上人群
我要把爱全都装进心里
陪我一起旅行
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
我要送你日不落的想念
寄出代表爱的明信片
我要送你日不落的爱恋
心牵着心把世界走遍
你就是庆典你就是晴天
我的爱未眠
不落的想念飞在你身边
我的爱未眠
</span>
<script >
/*以下是歌词插件和动图的插件及控件*/
document.write('<script src="attach://45716.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45715.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45717.rar" type="text/javascript" charset="utf-8"><\/script>');
</script>
<script>
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #800000, #800000, #800000 '+ aud.currentTime / aud.duration * 100 + '%, #cccccc 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
</script> 欣赏美乐，问候亚伦。 这个音箱功放效果漂亮，播放器按钮鼠标触碰会变大一点点，很真实的感觉{:4_187:} 按钮、进度条、进度时间的设计都很合理，频谱效果也漂亮。
欣赏亚伦老师好帖{:4_199:} 亚伦这个功放播放器制作漂亮的{:4_187:} 但加分后会卡出论坛 小辣椒 发表于 2024-7-19 21:46
但加分后会卡出论坛
代码有误，会认真查看的！ 亚伦影音工作室 发表于 2024-7-19 21:55
代码有误，会认真查看的！
亚伦辛苦{:4_187:}
页:
[1]