|
|

楼主 |
发表于 2022-6-19 13:05
|
显示全部楼层
这个套用就比较容易了
- <style>
- .outer { left: -214px; width: 1024px; height: 640px; background: transparent; box-shadow: 0 2px 24px #000; position: relative; }
- .picbox { position: absolute; width: 1024px; height: 640px; animation: fadeout 2s; }
- .mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
- .wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
- .mama meter { width: 90px; position: relative; }
- .wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
- .wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
- .lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 2em sans-serif; color: lightgreen; text-shadow: 1px 1px 1px #000; border-radius: 100% 0; position: absolute; }
- @keyframes up { from { top: -6px; } to { top: -16px; } }
- @keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
- @keyframes fadeout { from { opacity: 1; } to {opacity: .1; } }
- </style>
- <div class="outer">
- <img class="picbox" src="https://638183.freep.cn/638183/qd/01.jpg" alt="" />
- <div class="mama">
- <div class="wrap"></div>
- <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
- </div>
- <div class="lrcbox">Loading ...</div>
- </div>
- <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/16/30c4cdb0137a24b3618270afcc99a86c.mp3" autoplay="autoplay" loop="loop"></audio>
- <script>
- let mama = document.querySelector('.mama'),
- picbox = document.querySelector('.picbox'),
- wrap = document.querySelector('.wrap'),
- lrcbox = document.querySelector('.lrcbox'),
- aud = document.querySelector('#aud'),
- meter = document.querySelector('#meter');
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
- prog = (tt, cc) => 100 * cc / tt;
- let idx = 0, flag = true, slip= 1;
- let picAr = [
- 'https://638183.freep.cn/638183/qd/01.jpg',
- 'https://638183.freep.cn/638183/qd/02.jpg',
- 'https://638183.freep.cn/638183/qd/03.jpg',
- 'https://638183.freep.cn/638183/qd/04.jpg',
- 'https://638183.freep.cn/638183/qd/05.jpg',
- 'https://638183.freep.cn/638183/qd/06.jpg',
- 'https://638183.freep.cn/638183/qd/07.jpg',
- 'https://638183.freep.cn/638183/qd/08.jpg',
- 'https://638183.freep.cn/638183/qd/09.jpg',
- 'https://638183.freep.cn/638183/qd/10.jpg'
- ];
- let lrcAr = [
- ['0.00','作词 : 江涛'],
- ['1.00','作曲 : 陈歌辛'],
- ['42.65','春风吹,春燕归,桃杏多娇媚。'],
- ['53.57','侬把舵来郎摇桨,划破西湖水。'],
- ['64.61','春意浓,春心暖,无力柳叶垂,'],
- ['75.57','眼儿相望心相印,侬为郎陶醉。'],
- ['86.76','春意浓,春心暖,无力柳叶垂,'],
- ['97.66','眼儿相望心相印,侬为郎陶醉。'],
- ['130.72','春风吹,春燕归,高山山青翠。'],
- ['141.81','湖上鸳鸯花间蝶,双栖又双飞。'],
- ['152.68','情切切,意绵绵,无言痴相对,'],
- ['163.85','但闻远处歌声传,春日最陶醉。'],
- ['174.65','情切切,意绵绵,无言痴相对,'],
- ['185.64','但闻远处歌声传,春日最陶醉。']
- ];
- Array.from({length: 10}).forEach((ele,key) => {
- ele = document.createElement('span');
- ele.className = 'sskey';
- ele.style.left = key * 6 + key * 3 + 'px';
- ele.style.height = num(10,60) + 'px';
- ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
- wrap.appendChild(ele);
- })
- let sskey = document.querySelectorAll('.sskey');
- mama.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('timeupdate', () => {
- Array.from(sskey).forEach((ele) => {
- ele.style.height = num(10, 60) + 'px';
- })
- meter.value = prog(aud.duration, aud.currentTime);
- let tt = aud.currentTime;
- for(j=0; j<lrcAr.length; j++){
- if(tt >= lrcAr[j][0] - slip){
- lrcbox.innerHTML = lrcAr[j][1];
- }
- }
- });
- let timer = setInterval(() => {
- idx ++;
- if(idx >= picAr.length) idx = 0;
- picbox.src = picAr[idx];
- flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
- }, 10000);
- </script>
复制代码
|
|