贴出代码,方便大家研究、完善:
- <style>
- #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/nlgx.webp') no-repeat center/cover; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
- #mplayer { position: absolute; width: 60%; height: 160px; bottom: 0; display: flex; place-items: end; }
- .mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 10px; background: gray linear-gradient(to top,darkgreen,green,lightgreen); transition: height .45s; }
- .mLine::after { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -4px; }
- .tit { position: absolute; top: 20px; font: bold 3em sans-serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
- @keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
- </style>
- <div id="papa">
- <div class="tit">南锣鼓巷</div>
- <div id="mplayer"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=433059656.mp3" loop autoplay></audio>
- </div>
- <script>
- (function() {
- let ybData = [62,42,29,28,21,41,18,62,62,43,26,29,54,54,93,60,60,45,38,22,55,94,65,36,58,43,30,24,75,67,20,31,14,10,30,62,73,57,31,27,18,49,92,82,58,24,38,22,39,48,80,54,74,72,49,39,15,61,46,37,0,26,25,0,55,61,51,38,37,5,36,54,69,38,43,33,26,10,67,42,31,20,6,0,0,70,48,36,12,16,17,32,60,58,43,27,41,35,52,50,76,60,38,29,17,24,39,74,16,27,22,0,0,0,99,81,49,31,64,25,15,71,88,69,71,68,67,28,77,101,77,55,84,71,51,70,82,50,28,86,36,0,54,73,59,62,86,62,24,63,69,65,81,83,82,70,60,94,85,92,71,63,59,50,76,86,74,53,164,101,104,124,144,129,152,118,146,109,126,149,107,152,139,143,121,180,184,161,173,182,181,164,164,180,166,165,164,170,154,130,153,139,106,132,150,127,143,139,147,122,153,145,140,170,175,167,183,182,176,181,146,148,163,183,159,174,170,155,125,119,129,118,102,90,100,105,101,91,101,100,95,88,91,83,83,79,85,100,76,59,58,62,74,53,69,59,77,90,77,109,68,51,69,78,90,68,70,82,46,72,91,112,100,89,86,90,81,129,147,197,194,176,120,21,168,186,201,171,168,165,193,171,194,193,162,175,164,182,159,205,179,189,192,175,196,187,200,161,182,190,170,171,175,199,175,189,183,167,164,175,194,159,196,143,157,175,182,185,185,204,179,185,187,166,149,61,37,48,34,40,26,183,176,177,176,203,171,186,183,165,166,186,197,163,199,141,180,181,192,197,171,206,176,172,176,187,189,181,203,159,189,174,182,177,186,207,181,186,147,175,149,196,201,169,192,179,180,173,200,185,174,204,177,157,95,43,0,0,148,155,181,200,180,148,95,77,88,68,64,47,50,51,83,105,67,76,46,41,42,57,76,45,104,61,31,45,2,75,18,13,0,0,0,0,53,25,25,0,0,0,36,61,17,0,0,3,0,38,69,41,0,43,6,20,2,57,51,15,2,22,19,36,60,57,38,33,16,20,43,54,60,65,24,39,43,46,67,51,28,20,0,0,8,0,61,31,22,0,23,0,0,48,35,42,49,35,5,9,69,60,42,42,50,23,14,73,47,23,25,30,0,0,40,82,48,51,71,57,43,59,108,69,70,94,88,76,74,112,80,74,74,70,48,86,75,59,92,32,55,17,54,57,66,55,52,58,25,59,98,87,63,53,91,68,48,94,107,57,82,80,60,34,76,92,79,60,138,124,99,147,138,133,124,133,163,126,140,120,146,120,153,160,134,147,172,173,185,194,178,182,179,157,170,186,176,153,160,146,120,147,117,140,111,126,114,131,157,146,134,136,158,119,175,182,185,179,182,187,163,164,164,157,172,169,184,170,132,122,115,118,113,93,93,82,106,92,94,111,95,88,89,74,77,94,95,81,76,79,41,76,64,71,64,66,78,70,59,61,50,79,90,86,64,63,71,73,99,81,68,94,73,106,80,97,85,94,131,153,191,191,165,59,0,186,172,190,191,180,185,162,181,161,198,161,180,193,166,161,184,204,159,185,196,169,161,180,196,162,194,160,169,177,173,194,178,195,171,182,186,181,187,182,204,160,177,153,189,175,186,205,175,190,180,92,39,39,24,22,13,36,191,176,173,176,182,193,177,200,141,164,165,182,194,182,200,178,194,175,189,178,172,206,165,189,144,169,143,191,201,181,201,176,173,168,190,187,187,200,160,165,149,191,166,197,196,181,189,163,195,172,131,107,89,45,9,0,153,99,69,80,72,51,57,57,79,65,62,63,70,55,61,71,83,89,62,75,70,61,88,52,53,61,50,46,52,91,77,63,60,65,85,67,86,69,71,56,70,81,65,81,76,61,69,53,77,65,78,82,54,57,52,40,32,49,42,10,0,0,0,0,0,54,0,0,0,0,0,0,0];
- let total = Math.ceil(mplayer.offsetWidth / 6);
- let cNum = 0;
- for(j=0; j<total; j++) {
- let el = document.createElement('span');
- el.className = 'mLine';
- el.style.height = Math.floor(Math.random()* 100) + 'px';
- mplayer.appendChild(el);
- }
- let lines = document.querySelectorAll('.mLine');
- mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
-
- aud.addEventListener('timeupdate', () => {
- cNum ++;
- if(cNum >= ybData.length) cNum = 0;
- setPinpu(cNum);
- });
- function setPinpu(num) {
- let data = ybData[num];
- for(j=0; j<total; j++) {
- lines[j].style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
- }
- }
- })();
- </script>
复制代码
|