《上海往事》 学习黑黑最新响应式频谱效果
<style>
#papa { margin: 120px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/63942ae5b1fccdcd3662f3c1.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#papa::after { content: ''; position: absolute; width: 100%; height: 100%; opacity: .45; background: url('https://pic.imgdb.cn/item/63942cb2b1fccdcd36654265.gif');}
#yinfu { position: absolute; left: 0px; top: 0px; width: 400px; height: 251px; opacity: 0.25; }
#pic { position: absolute; right: 60px; top: 40px; width: 400px; height: 300px; mix-blend-mode: screen; -webkit-mask-image:radial-gradient(black 35%, transparent 70%); opacity: 1;}
</style>
<div id="papa">
<img id="yinfu" src="https://pic.imgdb.cn/item/63942e85b1fccdcd3667ce70.gif" alt="" />
<img id="pic" src="https://pic.imgdb.cn/item/63944c5bb1fccdcd3699b6d8.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=79604.mp3" autoplay loop></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: `<style>#mplayer {--ww: 300px;--hh: 140px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;right:330px; width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: center center;cursor: pointer; z-index: 10; }.mLine {position: relative;margin: 0 1px 0 0;width: 2px;height: 8px;background: var(--pinpu);transition: .35s;opacity: .95;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 100%, 50%, .45), hsla(120, 100%, 50%, .75));position: absolute;top: 20px;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: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="mplayer"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 3), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
ypData = ;
HCPlayer({
lrcAr: lrcAr,
ypData: ypData,
player_css: '--ww: 32%; --pinpu: linear-gradient(to top,darkgreen,green,lightgreen,green,darkgreen); place-items: center center;',
});
})();
</script> 忙乎一下午，学了黑黑的最新效果，有歌词同步，暂停时候频谱还能显示。很喜欢这个新效果，忍不住马上去找歌曲做帖子了。{:4_173:}感谢黑黑的代码{:4_187:} 搜到这首歌，然后去找图图，总找不到合适的，看到这张带百乐门名字的，嗯，比较能体现老上海风情。{:4_173:} 试一下让歌词和频谱同色系，觉得效果一般，貌似可以各配各的，可能更好点{:4_173:} 想找个动图能模拟一下旧上海的纸醉金迷，也没找到合适的，就这个吧，假装一下{:4_173:} 亲爱的，效果特别美，太棒了{:4_178:} 现在手机，晚上电脑继续欣赏{:4_199:} 很漂亮，还有舞厅的感觉，唱阿莲的戴军吗？ 很漂亮的大上海啊！欣赏问好！{:4_179:} 百乐门，这背景有年头了{:4_199:} 听着音乐，看着美图，真有点身在大上海的感觉。 掌声送上{:4_199:} 醉美水芙蓉 发表于 2022-12-10 19:08
红影美女厉害这么快就做好了！
谢谢水芙蓉美女鼓励{:4_187:} 小辣椒 发表于 2022-12-10 19:09
亲爱的，效果特别美，太棒了
谢谢亲爱的，试着瞎鼓捣{:4_173:} 上海朝阳 发表于 2022-12-10 19:25
很漂亮，还有舞厅的感觉，唱阿莲的戴军吗？
我不知道啊，就是觉得这歌挺好听，然后就找图做帖了{:4_173:} 梦缘 发表于 2022-12-10 20:03
很漂亮的大上海啊！欣赏问好！
谢谢梦缘鼓励，曾经的夜上海纸醉金迷，是远东最繁花的地方{:4_173:} 闲言不语 发表于 2022-12-10 20:10
百乐门，这背景有年头了
我去找老上海图片，遇到了这张，觉得还不错，就用了{:4_173:} 梦油 发表于 2022-12-10 20:55
听着音乐，看着美图，真有点身在大上海的感觉。
这是旧上海的感觉吧，现在的不知道怎样，我自己都不知道，很少晚上出去玩{:4_173:} 辫子哥哥 发表于 2022-12-10 21:46
掌声送上
这次不批分了？{:4_173:}