进度可控的瓢虫播放器

马黑黑 发表于 2023-7-20 21:05

马黑黑 发表于 2023-7-20 21:06

代码
<style>
:root { --state: running; --prg: 0%; }
#mplayer {
position: absolute;
left: 10px;
top: 10px;
width: 200px;
height: 40px;
background: linear-gradient(to right,red var(--prg),tan 0) repeat-x 0 50% / 100% 2px;
}
#mplayer::before, #mplayer::after {
position: absolute;
top: 28%;
font-size: 14px;
}
#mplayer::before {
content: attr(data-cu);
left: -50px;
}
#mplayer::after {
content: attr(data-du);
right: -50px;
}
#btnplay {
position: absolute;
left: calc(var(--prg) - 15px);
bottom: 0;
font: normal 30px sans-serif;
cursor: pointer;
animation: swing .3s infinite linear var(--state);
}
@keyframes swing {
from { transform: rotate(90deg) skew(-5deg); }
to { transform: rotate(90deg) skew(5deg); }
}
</style>

<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
<div id="btnplay" title="暂停/播放">🐞</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990857214" loop autoplay></audio>

<script>
(function() {
let root = document.querySelector(':root');
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;}
let mState = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
   root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
   mplayer.dataset.cu = toMin(aud.currentTime);
   mplayer.dataset.du = toMin(aud.duration);
});
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
</script>

马黑黑 发表于 2023-7-20 21:06

本帖最后由马黑黑于 2023-7-20 22:19 编辑

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

<div id="papa">

<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
   <div id="btnplay" title="暂停/播放">🐞</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:19

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

红影发表于 2023-7-20 21:25

浮现的播放进度和暂停播放等提示特别温馨{:4_204:}

小辣椒 发表于 2023-7-20 21:33

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

马黑黑 发表于 2023-7-20 22:19

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

还行

马黑黑 发表于 2023-7-20 22:20

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

这个是点条，不是拉条{:4_170:}

马黑黑 发表于 2023-7-20 22:20

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

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

马黑黑 发表于 2023-7-20 22:21

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

可以改进，美化

红影发表于 2023-7-20 23:02

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

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

马黑黑 发表于 2023-7-21 07:41

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

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

樵歌发表于 2023-7-21 10:35

花菇凉在干活{:4_173:}

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

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

{:4_172:}

红影发表于 2023-7-21 14:05

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

是的，看着像是会动了一样{:4_173:}

小辣椒 发表于 2023-7-21 22:09

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

所以我老说swf那种播放器的老叫法{:4_189:}

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

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

拉条说法土，一是会让人想到辣条，而是想到拉P条{:4_170:}

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

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

接近

樵歌发表于 2023-7-22 07:32

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

一听花菇凉，瞧笑的{:4_172:}

页: [1] 2 3

花潮论坛's Archiver

进度可控的瓢虫播放器