进度可控的瓢虫播放器

马黑黑

效果：

🐞

马黑黑

代码

1. <style>
   
2. :root { --state: running; --prg: 0%; }
   
3. #mplayer {
   
4.     position: absolute;
   
5.     left: 10px;
   
6.     top: 10px;
   
7.     width: 200px;
   
8.     height: 40px;
   
9.     background: linear-gradient(to right,red var(--prg),tan 0) repeat-x 0 50% / 100% 2px;
   
10. }
    
11. #mplayer::before, #mplayer::after {
    
12.     position: absolute;
    
13.     top: 28%;
    
14.     font-size: 14px;
    
15. }
    
16. #mplayer::before {
    
17.     content: attr(data-cu);
    
18.     left: -50px;
    
19. }
    
20. #mplayer::after {
    
21.     content: attr(data-du);
    
22.     right: -50px;
    
23. }
    
24. #btnplay {
    
25.     position: absolute;
    
26.     left: calc(var(--prg) - 15px);
    
27.     bottom: 0;
    
28.     font: normal 30px sans-serif;
    
29.     cursor: pointer;
    
30.     animation: swing .3s infinite linear var(--state);
    
31. }
    
32. @keyframes swing {
    
33.     from { transform: rotate(90deg) skew(-5deg); }
    
34.     to { transform: rotate(90deg) skew(5deg); }
    
35. }
    
36. </style>
    
37. 
    
38. <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
    
39.     <div id="btnplay" title="暂停/播放">&#128030;</div>
    
40. </div>
    
41. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990857214" loop autoplay></audio>
    
42. 
    
43. <script>
    
44. (function() {
    
45.     let root = document.querySelector(':root');
    
46.     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;}
    
47.     let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
48.     aud.addEventListener('pause', mState, false);
    
49.     aud.addEventListener('play', mState, false);
    
50.     aud.addEventListener('timeupdate', () => {
    
51.         root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
    
52.         mplayer.dataset.cu = toMin(aud.currentTime);
    
53.         mplayer.dataset.du = toMin(aud.duration);
    
54.     });
    
55.     btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
56.     mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
    
57. })();
    
58. </script>

复制代码

马黑黑

使用说明：
一、请将播放控制器的HTML代码放置于帖子父元素之中。例如，帖子的最外层元素 id="papa"，则：

<div id="papa">
    <!-- 其他代码 -->
    <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
        <div id="btnplay" title="暂停/播放">&#128030;</div>
    </div>

    <!-- 其他代码 -->
</div>

#papa {} 选择器应设置相对定位，即 position: relative; ，然后根据需要设置 #mplayer {} 选择器的top 和 left值（源码05、06行）。

瓢虫可以更换为其他的 Emoji 图标，如果需要，也可以使用背景图片，注意控制尺寸、调整相应的 CSS 变量算法即可。

二、audio标签必须使用 id=“aud"：

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990857214" loop autoplay></audio>

上行代码可以放在帖子代码之外。

三、JS已经封装好，需要lrc歌词的请将请将相关代码放在如下代码块中（50~54行）：

    aud.addEventListener('timeupdate', () => {
        root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
        mplayer.dataset.cu = toMin(aud.currentTime);
        mplayer.dataset.du = toMin(aud.duration);
        //lrc歌词相关
    });


且之前应有相应函数。

亚伦影音工作室

马老师的播放器太牛了，简便易懂，学生参考了！

红影

浮现的播放进度和暂停播放等提示特别温馨

小辣椒

黑黑这个播放器有进度条的我最喜欢，平时我们讲的（拉条）

马黑黑

醉美水芙蓉 发表于 2023-7-20 21:12
老师速度好快呀！

还行

马黑黑

小辣椒 发表于 2023-7-20 21:33
黑黑这个播放器有进度条的我最喜欢，平时我们讲的（拉条）

这个是点条，不是拉条

马黑黑

红影 发表于 2023-7-20 21:25
浮现的播放进度和暂停播放等提示特别温馨

这个简单的，就是想不想用的问题

马黑黑

亚伦影音工作室 发表于 2023-7-20 21:19
马老师的播放器太牛了，简便易懂，学生参考了！

可以改进，美化

红影

马黑黑 发表于 2023-7-20 22:20
这个简单的，就是想不想用的问题

这个小瓢虫也有意思。给它设了度数，结果就在抖动了。

马黑黑

红影 发表于 2023-7-20 23:02
这个小瓢虫也有意思。给它设了度数，结果就在抖动了。

skew，transform 中的扭曲方法，度数小一点时可模拟扭动效果

樵歌

花菇凉在干活

马黑黑

樵歌 发表于 2023-7-21 10:35
花菇凉在干活

红影

马黑黑 发表于 2023-7-21 07:41
skew，transform 中的扭曲方法，度数小一点时可模拟扭动效果

是的，看着像是会动了一样

小辣椒

马黑黑 发表于 2023-7-20 22:20
这个是点条，不是拉条

所以我老说swf那种播放器的老叫法

马黑黑

小辣椒 发表于 2023-7-21 22:09
所以我老说swf那种播放器的老叫法

拉条说法土，一是会让人想到辣条，而是想到拉P条

马黑黑

红影 发表于 2023-7-21 14:05
是的，看着像是会动了一样

接近

樵歌

马黑黑 发表于 2023-7-21 11:37

一听花菇凉，瞧笑的