|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
先贴代码
- <style>
- #papa { margin: auto; width: 1024px; height: 640px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
- #mplayer { position: absolute; bottom: 20px; left: calc(50% - 60px); width: 120px; height: 120px; border-radius: 50%; border: 6px solid darkgreen; display: grid; place-items: center center; user-select: none; cursor: pointer; }
- #tmsg { font: normal 14px sans-serif; color: snow; z-index: 450; }
- .mline { --hh: 0px; position: absolute; width: 2px; height: 6px; background: green; }
- .mline::before {position: absolute;content: '';width: 100%;height: var(--hh);bottom: 0;left: 0;background: linear-gradient(to top, green, lightgreen); }
- </style>
- <div id="papa">
- <div id="mplayer"><span id="tmsg">play</span></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28221434.mp3" autoplay loop></audio>
- </div>
- <script>
- let ppsize = 4, gap = 2; /* 频谱条宽度和间距 */
- let total = Math.floor(mplayer.clientWidth * Math.PI / (ppsize + gap)); /* 频谱总数 */
- //创建频谱
- for(j=0; j< total; j++) {
- let ele = document.createElement('span');
- ele.className = 'mline';
- ele.style.width = ppsize + 'px';
- ele.style.transform = `rotate(${j*360/total}deg) translateY(60px)`; /* 分布频谱 */
- mplayer.appendChild(ele);
- }
- let lines = document.querySelectorAll('.mline'); /* 频谱操作句柄 */
- /* 频谱变换 : 伪元素加长 */
- let update = () => {
- /* 遍历频谱元素并改变其高度值 */
- lines.forEach((item) => item.style.setProperty('--hh',Math.random() * 60 + 'px'));
- /* 播放器不是停止状态下请求下一帧 */
- if(!aud.paused) window.requestAnimationFrame(update);
- };
- /* 格式化输出时间 */
- 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;}
- /* 播放器单击事件 */
- mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
- /* audio 监听事件 */
- aud.addEventListener('timeupdate', () => {
- update(); /* 运行频谱变化函数 */
- tmsg.innerText = '-' + toMin(aud.duration - aud.currentTime); /* 输出时间信息 */
- });
- </script>
复制代码
|
评分
-
| 参与人数 3 | 威望 +120 |
金钱 +240 |
经验 +120 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
梦缘
| + 20 |
+ 40 |
+ 20 |
很给力! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|