音频播放器：小频谱+进度条（初稿）

马黑黑

00:00

00:00

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 740px;
   
5.         height: 460px;
   
6.         background: #666;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         display: grid;
   
9.         place-items: center;
   
10.         position: relative;
    
11. }
    
12. #mplayer {
    
13.         position: absolute;
    
14.         display: grid;
    
15.         grid-template-areas:
    
16.                 'cur btnplay dur'
    
17.                 'prog prog prog';
    
18.         gap: 4px;
    
19.         place-items: end center;
    
20.         font-size: 14px;
    
21.         bottom: 20px;
    
22. }
    
23. #cur { grid-area: cur; color: snow; }
    
24. #dur { grid-area: dur; color: snow; }
    
25. #btnplay {
    
26.         grid-area: btnplay;
    
27.         display: grid;
    
28.         grid-auto-flow: column;
    
29.         place-items: end center;
    
30.         gap: 0 4px;
    
31.         height: 60px;
    
32.         cursor: pointer;
    
33. }
    
34. #btnplay > span {
    
35.         background: red;
    
36.         width: 2px;
    
37.         transition: .3s;
    
38. }
    
39. #prog {
    
40.         --ww: 0px;
    
41.         grid-area: prog;
    
42.         width: 300px;
    
43.         height: 12px;
    
44.         border-radius: 6px;
    
45.         background: snow;
    
46.         opacity: .65;
    
47.         cursor: pointer;
    
48.         position: relative;
    
49. }
    
50. #prog::before {
    
51.         position: absolute;
    
52.         content: '';
    
53.         width: var(--ww);
    
54.         height: 12px;
    
55.         border-radius: 6px;
    
56.         background: snow linear-gradient(90deg, green,red);
    
57.         opacity: .65;
    
58. }
    
59. 
    
60. </style>
    
61. 
    
62. <div id="papa">
    
63.         <div id="mplayer">
    
64.                 <div id="cur">00:00</div>
    
65.                 <div id="btnplay"></div>
    
66.                 <div id="dur">00:00</div>
    
67.                 <div id="prog"></div>
    
68.         </div>
    
69.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=25935621.mp3" loop autoplay></audio>
    
70. </div>
    
71. 
    
72. <script>
    
73. (function() {
    
74.         for(j=0; j<20; j++) {
    
75.                 let pinpu = document.createElement('span');
    
76.                 pinpu.className = 'pinpu';
    
77.                 pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
    
78.                 btnplay.appendChild(pinpu);
    
79.         }
    
80. 
    
81.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
82.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
83.         aud.addEventListener('timeupdate', () => {
    
84.                 let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
    
85.                 prog.style.setProperty('--ww', prg + 'px');
    
86.                 cur.innerText = toMin(aud.currentTime);
    
87.                 dur.innerText = toMin(aud.duration);
    
88.                 setPinpu();
    
89.         });
    
90. 
    
91.         let toMin = (val) => {
    
92.                 if (!val) return '00:00';
    
93.                 val = Math.floor(val);
    
94.                 let min = parseInt(val / 60),
    
95.                         sec = parseFloat(val % 60);
    
96.                 if (min < 10) min = '0' + min;
    
97.                 if (sec < 10) sec = '0' + sec;
    
98.                 return min + ':' + sec;
    
99.         };
    
100. 
     
101.         let setPinpu = ()  => {
     
102.                 let eles = document.querySelectorAll('.pinpu');
     
103.                 eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
     
104.         };
     
105. })();
     
106. </script>

复制代码

马黑黑

为能让友友们自由修改，CSS、HTML、JS都做了格式化，所以代码行数显得多了一些

马黑黑

频谱设定


一、 频谱父元素 #btnplay（CSS代码）

#btnplay {
        grid-area: btnplay;
        display: grid;
        grid-auto-flow: column;
        place-items: end center;
        gap: 0 4px; /* 间距，修改第二个数值 */
        height: 60px; /* 频谱最大高度 */
        cursor: pointer;
}


二、频谱个体样式 #btnplay > span（CSS代码）

#btnplay > span {
        background: red; /* 初始颜色 */
        width: 2px;  /* 频谱个体宽度 */
        transition: .3s; /* 变化总时长 */
}


三、生成频谱（JS代码）
        //修改红色数据
        for(j=0; j<20; j++) {
                // 具体代码略
        }

上海朝阳

代码看不懂，这首日文歌听了，适合海岸边游览的车载音乐

红影

虽然暂时看不到效果，但感觉这个带频谱的播放器很漂亮

马黑黑

醉美水芙蓉 发表于 2022-10-31 11:47
设计精美，带屏谱更加漂亮！

还行

马黑黑

红影 发表于 2022-10-31 09:58
虽然暂时看不到效果，但感觉这个带频谱的播放器很漂亮

不差

相约爱晚亭

频谱播放器好看，喜欢！

小辣椒

点击频谱音乐出来了

小辣椒

马黑黑 发表于 2022-10-31 08:13
为能让友友们自由修改，CSS、HTML、JS都做了格式化，所以代码行数显得多了一些

黑黑想的很周到

红影

马黑黑 发表于 2022-10-31 12:13
不差

肯定的。黑黑辛苦

马黑黑

红影 发表于 2022-10-31 16:30
肯定的。黑黑辛苦

举手之劳

马黑黑

小辣椒 发表于 2022-10-31 13:59
黑黑想的很周到

还不差

马黑黑

小辣椒 发表于 2022-10-31 13:58
点击频谱音乐出来了

自动播放的吧。

马黑黑

相约爱晚亭 发表于 2022-10-31 13:34
频谱播放器好看，喜欢！

还可以吧

红影

马黑黑 发表于 2022-10-31 18:13
举手之劳

现在看到效果了，漂亮

马黑黑

红影 发表于 2022-10-31 19:46
现在看到效果了，漂亮

还行的吧