送给小辣椒的3d圆环频谱播放器
本帖最后由 马黑黑 于 2022-12-25 08:58 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; perspective: 2000px; position: relative; z-index: 1; }
#papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/bird.gif'); top: 0; }
#btnMsg { position: absolute; color: snow; background: green; opacity: 0; border: 2px solid snow; border-radius: 8px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 1001; }
</style>
<div id="papa"><span id="btnMsg">全屏观赏</span></div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/2144527/ueditor/file/1073/2144527/1671717256689029.mp3" loop autoplay crossorigin="anonymous"></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `<style>#mplayer { --ww: 300; --bg: linear-gradient(to top,lightgreen,green,lightgreen); --state: paused; position: absolute; width: var(--ww); height: 200px; transform-style: preserve-3d; animation: rot3d 120s infinite linear; animation-play-state: var(--state); cursor: pointer; z-index: 901; }.mline { position: absolute; width: 8px; height: 10px; bottom: 0; left: calc(50% - 4px); border-radius: 10px; opacity: .95; }.mline::before { position: absolute; content: ''; left: calc(50% - 6px); width: 12px; height: 12px; background: var(--psecolor); border-radius: 50%; transition: all var(--ts); animation: up 1s infinite; animation-play-state: var(--state); }#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }#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%; } }@keyframes rot3d { to { transform: rotateY(1turn); } }@keyframes up { to { top: -20px; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer" title="播放/暂停"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true;let total = Math.floor(mplayer.offsetWidth / 5), mRad = Math.floor(mplayer.offsetWidth / 2);for(j=0; j< total; j++) {let ele = document.createElement('span');ele.className = 'mline';ele.style.cssText += `background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});height: ${Math.floor(Math.random() * 80) + 20}px;transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);--psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});--ts: ${Math.random()}s;`;mplayer.appendChild(ele);}let Ac = new AudioContext;let source = Ac.createMediaElementSource(aud);let analyser = Ac.createAnalyser();source.connect(analyser);analyser.connect(Ac.destination);let output = new Uint8Array(total);let lines = document.querySelectorAll('.mline');(function update() {analyser.getByteFrequencyData(output);let mid = total % 2 === 0 ? total / 2 - 1 : Math.floor(total / 2);lines.forEach( (item,key) => {item.style.height = output/2 + 'px';});window.requestAnimationFrame(update);})();aud.addEventListener('timeupdate', () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'paused'), mplayer.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 calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
HCPlayer({
lrcAr: lrcAr,
player_css: '--ww: 360px; bottom: 65px;',
lrc_css: '--bg: linear-gradient(180deg,hsla(0,100%,50%,.35),hsla(120,100%,50%,.65)); color: lightblue; top: 10px;',
});
let fs = false, timerId;
btnMsg.style.opacity = '0';
btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
papa.onmousemove = () => {
clearTimeout(timerId);
btnMsg.style.opacity = '.95';
timerId = setTimeout('btnMsg.style.opacity = "0"',3000);
};
document.addEventListener("fullscreenchange", () => {
if(document.fullscreenElement !== null) {
fs = true;
btnMsg.innerText = '退出全屏';
} else {
fs = false;
btnMsg.innerText = '全屏观赏';
}
});
})();
</script>
问候老师好！前来观赏学习！精彩佳作，为您点赞！{:4_204:}{:4_205:} 这个皇冠用在可全屏的帖子更好，感觉不到背景变了后播放器的变化{:4_187:} @小辣椒亲爱的，收礼开心{:4_187:} 秋思梦景 发表于 2022-12-23 14:57
问候老师好！前来观赏学习！精彩佳作，为您点赞！
感谢支持 红影 发表于 2022-12-23 15:46
这个皇冠用在可全屏的帖子更好，感觉不到背景变了后播放器的变化
这个皇冠，用手机测试了一下，效果比电脑看的细腻 九爷今天第二次出场，小辣椒面子真大{:4_173:} 樵歌 发表于 2022-12-23 19:30
九爷今天第二次出场，小辣椒面子真大
还在化妆{:4_170:} 醉美水芙蓉 发表于 2022-12-23 20:43
欣赏老师佳作！
感谢支持 马黑黑 发表于 2022-12-23 19:34
还在化妆
小辣椒前几天幻阳，担心是实锤了。 樵歌 发表于 2022-12-24 08:07
小辣椒前几天幻阳，担心是实锤了。
哎哎，吓死宝宝了 频谱播放器好漂亮！点赞！ 相约爱晚亭 发表于 2022-12-24 16:47
频谱播放器好漂亮！点赞！
感谢支持。下午好。 马黑黑 发表于 2022-12-24 08:55
哎哎，吓死宝宝了
小辣椒要快点赶走羊羊{:4_189:} 樵歌 发表于 2022-12-24 20:36
小辣椒要快点赶走羊羊
真的假的 马黑黑 发表于 2022-12-24 20:38
真的假的
唯愿估计错了{:4_203:} 樵歌 发表于 2022-12-25 08:35
唯愿估计错了
看上去是真的了 马黑黑 发表于 2022-12-25 08:36
看上去是真的了
也跟林妹妹一样，多愁多病的身{:4_189:} 欣赏黑黑精彩佳作！想套用制作一个，不知道歌曲的地址有什么讲究？为什么不能用kw163等歌曲？请老师给与指点！{:4_176:}