心雨(3D环绕版) - 杨钰莹&毛宁【源码：马黑老师】
本帖最后由 亚伦影音工作室 于 2022-9-1 16:37 编辑 <br /><br /><style>#papa { left: -150px; width: 1024px; height: 620px; box-shadow: 3px 3px 2px #CCCCCC; background: lightblue url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d386798031aea2db88aea1629093d931.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(0% - 0px); bottom: 0px; width: 1024px; height: 620px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 1024px; height: 620px; border-radius: 0%; background:#000000 conic-gradient(from 0deg, #000090, #000090, #000090 1%, snow 0);mask: radial-gradient(transparent 35%, #000090 70%, #000090 0); -webkit-mask: radial-gradient(transparent 35%, #000090 70%, #000090 0); }
#btnplay { left: 40px; bottom: 20px;width: 20px; height: 20px; background: #ffffae; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 40px; bottom: 20px;width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #ffffae; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 80px;bottom: 10px; font: normal 16px sans-serif; color: #ffffae; }
#lrctext { position: absolute; left: calc(40% + 30px); 140px; bottom: 50px; font: bold 1.5em sans-serif; color: #ffffae; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00</span>
</div>
<div id="lrctext">lrc歌词</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [
['0.00','心雨(3D环绕版) - 杨钰莹&毛宁'],
['23.00','女：我的思念是不可触摸的网'],
['31.00','我的思念不再是决堤的海'],
['39.00','男：为什么总在那些飘雨的日子'],
['48.00','深深地把你想起'],
['56.00','女：我的'],
['56.00','心是六月的情'],
['61.00','沥沥下着心雨'],
['64.00','男：想你想你想你想你'],
['69.00','最后一次想你'],
['74.00','女：因为明天'],
['77.00','我将成为别人的新娘'],
['82.00','合：让我最后一次想你'],
['91.00','女：我的思念是不可触摸的网'],
['99.00','我的思念不再是决堤的海'],
['108.00','男：为什么总在那些飘雨的日子'],
['116.00','深深地把你想起'],
['147.00','女：我的思念是不可触摸的网'],
['155.00','我的思念不再是决堤的海'],
['164.00','男：为什么总在那些飘雨的日子'],
['172.00','深深地把你想起'],
['180.00','女：我的心是六月的情'],
['185.00','沥沥下着心雨'],
['188.00','男：想你想你想你想你'],
['194.00','最后一次想你'],
['198.00','女：因为明天'],
['202.00','我将成为别人的新娘'],
['206.00','合： 让我最后一次想你'],
['215.00','女：我的思念是不可触摸的网'],
['224.00','我的思念不再是决堤的海'],
['232.00','男：为什么总在那些飘雨的日子'],
['241.00','合： 深深地把你想起'],
['250.00','深深地把你想起']
];
aud.src = 'https://www.qqmc.com/mp3/music156734084.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 45deg, #000080, #ff0000, #00f080, #FF0000 ' + aud.currentTime / aud.duration * 100 + '%, #000060 80%)';
for (j = 0; j < lrcAr.length;j ++){
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>
制作漂亮，赞！最好再向左移动一下。{:4_199:} 漂亮的制作。赞。 3D立体声环绕效果特别明显，歌曲好听，制作漂亮。欣赏亚伦老师好帖{:4_187:}
页:
[1]