纯音欣赏--月亮最知道(学习黑黑假频谱假响应播放器）
<style>
#papa { margin: 120px 0 0 calc(50% - 793px); width: 1413px; height: 775px; background: #0b1a3a url('https://yinhua.ru/20221214/6IF.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
</style>
<div id="papa">
<audio id="aud" src="https://yinhua.ru/20221214/ylzd.mp3" loop autoplay></audio></div>
<script>
(function() {
(function(mkPlayer) { let defaults = { lrcAr: [], player_css: '', lrc_css: '', playerCode: ` <style> #mplayer { --color1: snow; --color2: navy; position: absolute; left: calc(50% - 60px); bottom: 10px; width: 110px; height: 110px; border-radius: 50%; background: repeating-conic-gradient(var(--color1) 0deg, var(--color2) 0.18deg); border: 6px solid var(--color1); cursor: pointer; display: grid; place-items: center center; box-shadow: 1px 2px 4px #000; } #mplayer::before { position: absolute; content: attr(data-tt); color: var(--color2); text-shadow: 1px 1px 2px var(--color1); opacity: .95; } #lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(220, 100%, 50%, .55), hsla(220, 100%, 50%, .55)); position: absolute; top: 180px; font: bold 2.0em 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" data-tt="0"></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 mKey = 0, coe = 0, mFlag = true;aud.addEventListener('pause', () => mState()); aud.addEventListener('playing', () => mState()); aud.addEventListener('ended', () => { mKey = 0; aud.play(); }); aud.addEventListener('timeupdate', () => { mplayer.dataset.tt = '-' + toMin(aud.duration - aud.currentTime); coe = Math.random() * 2.5; 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 update = () => { let step = coe + Math.random() * coe; mplayer.style.background = `repeating-conic-gradient(var(--color1) 0deg, var(--color2) ${step}deg)`; };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;};}; 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;}; mkPlayer.HCPlayer = playCode; })(this);
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '',
player_css: '--color1:#063b8e; --color2:Lavender; left:1200px; bottom:60px;',
});
})();
</script>
<br><br><br><br> 黑黑这个播放器感觉用这个场景特别美@马黑黑 谢谢岁月的粒子和光感效果，好久没有玩了@走过岁月 哎呀，这么美的画面与音乐，欣赏了 马黑黑 发表于 2022-12-14 22:14
哎呀，这么美的画面与音乐，欣赏了
黑黑，我还做了你昨天那个特效，用这个播放器特效不能出来了。那个帖我重新换了那个转盘了 小辣椒 发表于 2022-12-14 22:18
黑黑，我还做了你昨天那个特效，用这个播放器特效不能出来了。那个帖我重新换了那个转盘了
播放器不能在同一个帖子里使用多个，会冲突，除非你会处理 这个亲爱的加了动图和播放器，也很漂亮。把岁月的原背景发挥得特别好{:4_199:} 这假频谱响应用在这里也很恰当。欣赏亲爱的好帖{:4_199:} 不知道为什么，特别喜欢这个场景。从第一次看见就特别喜欢{:4_187:} 马黑黑 发表于 2022-12-14 22:20
播放器不能在同一个帖子里使用多个，会冲突，除非你会处理
昨天我去了那个播放器的代码的，但是还是不行 红影 发表于 2022-12-14 22:26
这个亲爱的加了动图和播放器，也很漂亮。把岁月的原背景发挥得特别好
想不出加什么效果好，就加了几个小动图 红影 发表于 2022-12-14 22:27
这假频谱响应用在这里也很恰当。欣赏亲爱的好帖
这个假频谱播放器其实很耐品的，仔细看看很精细的 红影 发表于 2022-12-14 22:28
不知道为什么，特别喜欢这个场景。从第一次看见就特别喜欢
意境美，音乐听了让人如痴如醉。。。。 小辣椒 发表于 2022-12-14 22:48
昨天我去了那个播放器的代码的，但是还是不行
主要是你还不熟悉各类语句、声明、函数，所以整合的话有操作难度 马黑黑 发表于 2022-12-14 22:55
主要是你还不熟悉各类语句、声明、函数，所以整合的话有操作难度
是的，瞎蒙的{:4_170:} 马黑黑 发表于 2022-12-14 22:55
主要是你还不熟悉各类语句、声明、函数，所以整合的话有操作难度
所以套用最省力，晚上空下来就套用玩玩做一个，很轻松的，自己加点东西就会感觉很累。 小辣椒 发表于 2022-12-14 22:49
想不出加什么效果好，就加了几个小动图
还加了个火，有意思{:4_173:} 小辣椒 发表于 2022-12-14 22:50
这个假频谱播放器其实很耐品的，仔细看看很精细的
是的，也是变化莫测，很有看头。 小辣椒 发表于 2022-12-14 22:51
意境美，音乐听了让人如痴如醉。。。。
是的，特别有感染力{:4_187:} 小辣椒 发表于 2022-12-14 23:03
所以套用最省力，晚上空下来就套用玩玩做一个，很轻松的，自己加点东西就会感觉很累。
加点什么的，只要不动源码部分，对你来说是轻松的
页:
[1]
2