黑老师美美旁边掉了一个珠子请找回来吧！
本帖最后由 亚伦影音工作室 于 2022-12-8 11:16 编辑 <br /><br /><style>#papa { margin: 120px -300px; position: relative; width: 1200px; height: 620px;background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/15a694e7db0a7ded052efb162e090da6.jpg')0 0/100% 100%; overflow: hidden;box-shadow: 0px 0px 2px; user-select: none; overflow:hidden; }
#tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; animation: fly 40s infinite alternate linear; transition: color .5s; }
#tit:hover { color: green; }
@keyframes fly { to { left: 860px; } }
#mplayer { --ww: 100%; position: absolute; width:100%; height: 260px; top:350px;cursor: pointer;filter:blur(0px)brightness(100%) drop-shadow(#ffffff 0 0 1px)drop-shadow(#FFf000 0 0 13px)drop-shadow(#FFf000 0 0 13px);z-index: 12; }
.ball { --hh: 15px; position: absolute; border-radius: 50%; transition: .15s; }
.ball::before { position: absolute; content: ''; width: 2px; height: var(--hh); left: calc(50% - 1px); top: 100%;transform-origin: 50% 0; }
</style>
<div id="papa">
<span id="tit">你要时常想念我 (DJ默涵版) - 蔷薇团长</span>
<div id="mplayer"><div class="ball"></div></div>
<divclass="items "style="text-align: center;position: absolute;top:100px; left:200px;z-index: 11;"><divid="lrcArea"></div></div>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%; "></div>
</div>
<audio id="aud" src="https://p4.t57.cn:8399/2022/zw/1/OAE.m4a" autoplay loop crossorigin="anonymous"></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = { size: 20,player_css: 'left: 50%; transform: translateX(-50%);',playerCode: ``};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let ballSize = data.size;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();(function () {let gap = 2;let maWidth = mplayer.offsetWidth;let total = Math.round(maWidth / (ballSize + gap + 1));if(total % 2 != 0 ) total -= 1;let audCtx = new AudioContext();let audSrc = audCtx.createMediaElementSource(aud);audSrc.crossorigin = 'anonymous';let analyser = audCtx.createAnalyser();audSrc.connect(analyser);analyser.connect(audCtx.destination);mplayer.style.cssText += `bottom: ${ballSize + gap}px;`;for(j=0; j<total; j++) {let el = document.createElement('span');let xx = j%2 === 0 ? maWidth/2 + (ballSize + gap) * j / 2 : maWidth/2 - (ballSize + gap) * (j-1) / 2 - ballSize;el.className = 'ball';el.style.cssText += `width: ${ballSize}px; height: ${ballSize}px; left: ${xx}px; background: linear-gradient(135deg,hsla(${Math.ceil(Math.random()*360)},${Math.round(Math.random()*100)}%,${Math.round(Math.random()*50)}%,.75),hsla(${Math.ceil(Math.random()*360)},100%,50%,.75))`;mplayer.appendChild(el);}let voiceHeight = new Uint8Array(analyser.frequencyBinCount);let balls = document.querySelectorAll('.ball');(function draw() {analyser.getByteFrequencyData(voiceHeight);let step = Math.round(voiceHeight.length / total);for (let j = 0; j < total; j++) {let a8h = voiceHeight;balls.style.top = mplayer.offsetHeight - a8h/2 + 'px';balls.style.setProperty('--hh',a8h/0 + 'px');}window.requestAnimationFrame(draw);})();})();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({size: 8});
})();
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}
#lrcArea{width: 980px;
height: 200%;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;margin: 0px -100px;}
#lrcArea ul{width: 100%;150px;
text-align: center;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 480px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:悟空大字库;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 35px;
font-family:悟空大字库;text-align: center;
color: #FF0000;
font-weight: bold; margin: 0px auto;}
/*mv动画*/
.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:750px;z-index: 4;}
.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 10s linear infinite;
}@keyframes rotating{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
<style type="text/css">.items{animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script id="lrc" type="text">
你要时常想念我 (DJ默涵版) - 蔷薇团长
词：沈石磊
曲：沈石磊
编曲：孙培喜
合声：凌菲
出品：亚伦影音工作室
制作人：亚伦
我知道我们不愿说出来
怕彼此留下伤害
以后谁还把我当小孩
谁还会让我依赖
谢谢你给的爱 虽然你已不在
望着你的背影回人海
谢谢你的爱 已经不能重来
我也只能默默的离开
转过头眼泪掉下来
就让过去的回忆填满心怀
谢谢你给的爱 虽然你已不在
望着你的背影回人海
谢谢你的爱 已经不能重来
我也只能默默的离开
转过头眼泪掉下来
就让过去的回忆填满心怀
以后你要时常想念我
至少曾经相爱过
我也会找到另一个他
也会偶尔对他说
谢谢你给的爱 虽然你已不在
望着你的背影回人海
谢谢你的爱 已经不能重来
我也只能默默的离开
转过头 眼泪掉下来
就让过去的回忆填满心怀
你要时常想念我
你要时常想念我
你要时常想念我
至少我们相爱过
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {
if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {
that.play();
}, false);
this.player.addEventListener('pause',function() {
that.pause();
}, false);
//歌词索引
this.idx = 0;
},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? ' ' : c) + '\n';
});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);
}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {
li.className = 'cur';
}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {
return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);
}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');
},
//播放
play:function() {
this.stop = false;
var that = this,
player = this.player,
i,len;
this.t = setInterval(function() {
if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;
}
}
},300);
},
//暂停
pause:function() {
this.stop = true;
clearInterval(this.t);
},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);
});
return seconds;
},
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,
i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';
}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
}
};
function g(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
function cEl(el) {
return document.createElement(el);
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function isEmptyObj(o) {
for(var p in o) return false;
return true;
}
function getOffset(el) {
var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: left,
top: top
};
}
var p = new musicPlayer({
player: g('aud'),
lrc: g('lrc').innerHTML,
lrcArea: g('lrcArea')
});
</script>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);
</script>
设计很精妙，美观大气，玩赏性高。赞！ 马黑黑 发表于 2022-12-8 11:20
设计很精妙，美观大气，玩赏性高。赞！
黑总都赞了，肯定算好的了{:4_199:} 辫子哥哥 发表于 2022-12-8 13:57
黑总都赞了，肯定算好的了
{:4_181:} 漂亮的珠子，欣赏问好！{:4_187:} 这个修改很美妙，漂亮的帖子，给亚伦老师点赞{:4_187:} 辫子哥哥 发表于 2022-12-8 13:57
黑总都赞了，肯定算好的了
过奖了，都是我的老师！ 这个小圆频谱是好的，刚才那个不晓得为什么我看见是倒的{:4_203:}
页:
[1]