网格布局：制作一个音频播放控制器

马黑黑

❁ 00:00 | 00:00

马黑黑

CSS+HTML。样式和之前的 svg 播放器一样。代码：

1. <style>
   
2. #papa { margin: auto; width: 740px; height: 460px; background: #fff; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; }
   
3. #mplayer { position: absolute; bottom: 20px; display: grid; grid-template-columns: auto auto auto; place-items: center; gap: 6px; user-select: none; }
   
4. #btnplay { width: 40px; height: 40px; text-align: center; font: normal 40px/40px sans-serif; color: green; cursor: pointer; animation: rot linear 4s infinite; }
   
5. #prog { --ww: 0px; width: 300px; height: 12px; border: 1px solid green; border-radius: 6px; background: snow; position: relative; }
   
6. #prog::before { position: absolute; content: ''; width: var(--ww); height: 12px; border-radius: 6px; background: snow linear-gradient(90deg, green, red); }
   
7. #audtime { font: normal 14px sans-serif; color: green; }
   
8. @keyframes rot { to { transform: rotate(1turn); } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <div id="mplayer">
    
13.                 <span id="btnplay">&#10049;</span>
    
14.                 <span id="prog"></span>
    
15.                 <span id="audtime">00:00 | 00:00</span>
    
16.         </div>
    
17. </div>
    
18. 
    
19. <script>
    
20. let aud = new Audio();
    
21. 
    
22. aud.autoplay = true;
    
23. aud.loop = true;
    
24. aud.src = 'https://music.163.com/song/media/outer/url?id=1421117420.mp3';
    
25. 
    
26. btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
28. 
    
29. aud.addEventListener('pause', () => mState());
    
30. aud.addEventListener('play', () => mState());
    
31. 
    
32. aud.addEventListener('timeupdate', () => {
    
33.         let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
    
34.         prog.style.setProperty('--ww', prg + 'px');
    
35.         audtime.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
    
36. });
    
37. 
    
38. let mState = () => aud.paused ? (btnplay.style.animationPlayState='paused') : (btnplay.style.animationPlayState='running');
    
39. 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;}
    
40. if(aud.paused) btnplay.style.animationPlayState = 'paused';
    
41. </script>

复制代码

马黑黑

【解析】

一、HTML主干：

        <div id="mplayer">
                <span id="btnplay">&#10049;</span>
                <span id="prog"></span>
                <span id="audtime">00:00 | 00:00</span>
        </div>


二、网格布局

mplayer 包裹 3 个 span 标签，一个是文本按钮 btnplay，一个是进度条 prog，一个是播放时间信息文本 audtime。mplayer 盒子采用 grid 布局，以父级属性规范 3 个 span 标签的排列：

#mplayer {
        position: absolute;
        bottom: 20px;
        width: auto;
        height: 80px;
        display: grid;
        grid-template-columns: auto auto auto;
        place-items: center;
        gap: 6px;
}


三、关于按钮

按钮预设是特殊符号的文本，可以更换类似圆形的符号。当然，如果需要，可以将按钮改为图片背景而不需要改变其他地方，仅 CSS 部分：

#btnplay {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: gray url('图片地址');
        cursor: pointer;
        animation: rot linear 4s infinite;
}


图片如果不是 40*40 的，background 属性需要自己加工一下

小辣椒

越来越漂亮了，那个黄的也是很喜欢的，现在又一个

马黑黑

小辣椒 发表于 2022-10-21 20:31
越来越漂亮了，那个黄的也是很喜欢的，现在又一个

差不多的东东，实现元素和方法不同而已

小辣椒

马黑黑 发表于 2022-10-21 20:38
差不多的东东，实现元素和方法不同而已

播放器样子一样，黑黑厉害，差不多的播放器可以多种元素和方法实现出来

马黑黑

小辣椒 发表于 2022-10-21 20:40
播放器样子一样，黑黑厉害，差不多的播放器可以多种元素和方法实现出来

还有画布也可以做呢，暂时不鼓捣了

小辣椒

马黑黑 发表于 2022-10-21 20:41
还有画布也可以做呢，暂时不鼓捣了

是的，得让我们消化了再说，否则学习后面忘记前面

相约爱晚亭

播放器代码收藏了，谢谢！

马黑黑

相约爱晚亭 发表于 2022-10-21 21:06
播放器代码收藏了，谢谢！

这个不算很复杂吧

马黑黑

醉美水芙蓉 发表于 2022-10-21 20:51
欣赏学习黑黑老师播放器！

马黑黑

小辣椒 发表于 2022-10-21 20:44
是的，得让我们消化了再说，否则学习后面忘记前面

有些东西是类功能封装，会修改关键的地方就好

小辣椒

马黑黑 发表于 2022-10-21 21:09
有些东西是类功能封装，会修改关键的地方就好

这个我就是喜欢的会自己瞎修改，对播放器我肯定会花一点时间的

马黑黑

小辣椒 发表于 2022-10-21 21:34
这个我就是喜欢的会自己瞎修改，对播放器我肯定会花一点时间的

很不错

小辣椒

马黑黑 发表于 2022-10-21 21:39
很不错

其实不用每个播放器都歌词同步吧，做歌词同步花时间

马黑黑

小辣椒 发表于 2022-10-21 21:52
其实不用每个播放器都歌词同步吧，做歌词同步花时间

懒人的说法

小辣椒

黑黑~~~这个播放器明天做歌词同步

小辣椒

看见有待续2个字，是不是还没有完全好？

马黑黑

小辣椒 发表于 2022-10-21 21:58
看见有待续2个字，是不是还没有完全好？

解释部分，正准备写，突然有人找