|
|

楼主 |
发表于 2022-5-29 09:09
|
显示全部楼层
本帖最后由 马黑黑 于 2022-5-29 09:42 编辑
参考代码:
- <style>
- .wrap {
- display: flex;
- align-items: flex-end;
- left: 20px;
- top: 20px;
- width: 60px;
- height: 60px;
- -webkit-box-reflect: right;
- cursor: pointer;
- position: relative;
- }
- .wrap span {
- width: 6px;
- height: 20px;
- background-color: rgba(255,0,0,.6);
- display: inline-block;
- }
- </style>
- <div class="wrap">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1940059510.mp3" autoplay="autoplay" loop="loop"></audio>
- </div>
- <script>
- let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
- let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
- Array.from({length: 10}).forEach((ele) => {
- ele = document.createElement('span');
- ele.className = 'sskey';
- ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
- wrap.appendChild(ele);
- });
- let sskey = document.querySelectorAll('.sskey');
- wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('timeupdate', () => {
- Array.from(sskey).forEach((ele) => {
- ele.style.height = num(20, 60) + 'px';
- });
- });
- </script>
复制代码
|
|