点击画面看歌词，再点频谱音乐停
本帖最后由 亚伦影音工作室 于 2024-12-14 13:35 编辑 <br /><br /><style>#cndpt{margin: 0px -200px ; opacity:1;
position: relative;width: 960px; height: 520px;
background:url(https://pic.imgdb.cn/item/643dbb490d2dde5777df1d3c.gif)no-repeat 95px 180px/20%,url(https://pic.imgdb.cn/item/67503954d0e0a243d4dd6efd.gif)no-repeat 60px 80px/40%,url(https://pic.imgdb.cn/item/66a34f6ed9c307b7e9581634.jpg)no-repeat center/cover; }
#enopg{
position: relative;width: 960px; height: 520px;
background:#000 url(https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)no-repeat center/cover;
display:none;}
#pa{z-index:10;
left:10%;
top: 300px;
width: 300px;
height: 100px;
color: cyan;
position: absolute;
display: grid;
place-items: center;
}
.pp {
position: absolute;
width: 1px;
min-height: 2px;
transform-origin: 0 50%;
transition: height .16s linear;
display: grid;
place-items: start center;
}
#tz { margin: 0px auto; bottom: 20px;width: 540px; height: 300px; border: 0px solid gray; position: absolute;z-index:1;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0;margin: 0px 20px;width: 100%; height: 60px; text-align: center; font: 300 3.2em/0em 华文隶书; color:#880000; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); }
#but {width:100%; height:100%;top:0%; left:0%;cursor: pointer;position: absolute;;z-index:1;}
#wz{position: absolute;top:120px; left:40px;
font:normal 3.2em/1em 华文隶书;
background: -webkit-linear-gradient(135deg,#0eaf6d,#ff6ac6 25%,#147b96 50%,#e6d205 55%,#2cc4e0 60%,#8b2ce0 80%,#ff6384 95%,#08dfb4);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: flowCss 2s infinite linear;
}
@-webkit-keyframes flowCss{0% {transform:translate(0%,0%)scale(0, 1);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
50% {transform:translate(0%,0%)scale(1);filter:hue-rotate(100deg)contrast(100%)brightness(100%);}
100% {transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)contrast(180%)brightness(300%);}
}
</style>
<div id="cndpt">
<div id="pa"></div>
<div id="but" onclick="pic()"></div>
<div id="enopg" >
<div id="wz" > 我和时光叙个旧</div>
<div id="tz" data-lrc=""></di>
</div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/91/c2/c8/a142c6d84637a28db449e2fa62205bc3/audio.mp3" autoplay loop></audio>
<script >
function pic(){
varimgElement= document.getElementById('enopg');
if (imgElement.style.display === 'none' || imgElement.style.display === '') {
imgElement.style.display = 'block';
} else {
imgElement .style.display = 'none';
}
}
tz.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
wz.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wz.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wz.style.animationPlayState = 'paused');
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
var lrc = `我和时光叙个旧
演唱Singer：水儿
词Lyric：简一
曲Composer：储楚
制作人：亚伦
词曲统筹：幕青
制作统筹：王娜娜
企划：羊羊
出品：亚伦影音
晃晃悠悠走过
几十个春秋
庸庸碌碌虚度
几十个年头
跌跌撞撞踏进
生活的河流
不知不觉走到
人生分叉口
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
`;
getAr(lrc);
const tt = Math.floor(pa.clientWidth / 4 - 5);
let pps = [];
Array(tt).fill('').forEach((_,k) => {
let sp = document.createElement('span');
sp.className = 'pp';
sp.style.cssText += `
left: ${10 + 4* k}px;
background: linear-gradient(to bottom, #ccc, #00ff00,#ccc);
`;
pps.push(sp);
pa.prepend(sp);
});
(function update() {
let output = [...new Array(tt).keys()].map((v,k) => Math.floor(Math.random() * (aud.paused ? 0 : 80 - Math.random() * 160)));
for(let j = 0; j < tt ; j++) {
pps.style.height = output + 'px';
}
window.requestAnimationFrame(update);
})();
</script> https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 好制作，点赞！
页:
[1]