又一个漂亮的单标签音频播放器

马黑黑

<style> #player {     position: absolute;     left: 120px;     top: 120px;     width: 280px;     height:10px;     background: linear-gradient(to right, var(--color) var(--prg), transparent 0);     border: 1px solid var(--color);     border-radius: 6px;     display: grid;     place-items: center;     --color: #f58be8;     --prg: 0%;     --btnSize: 50px; } #player::before, #player::after { position: absolute; content: ''; } #player::before {     width: var(--btnSize);     height: var(--btnSize);     top: calc(var(--btnSize) * -1 - 5px);     background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover;     animation: rot 6s linear infinite var(--state); } #player::after {     content: attr(data-time);     inset: -30px 0 10px 0;     text-align: justify;     text-align-last: justify;     font-size: 14px;     color: var(--color); } @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="player" data-time="00:00 00:00"></div> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28684483" autoplay loop></audio>   <script> const vids = document.querySelectorAll('.vid'); const btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));   const mState = () => {     player.style.setProperty('--state',['running','paused'][+aud.paused]);     if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play()); };   const s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');   aud.onplaying = aud.onpause = () => mState();   aud.ontimeupdate = () => {     player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');     player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration); }   player.onclick = (e) => {     if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;     if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause(); }   player.onmousemove = (e) => {     if(e.offsetY < 0) {         if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {             player.title = aud.paused ? '播放' : '暂停';             player.style.cursor = 'pointer';         }     }else{         player.title = '调节进度';         player.style.cursor = 'pointer';     } }; </script>

马黑黑

使用方法：

（一）播放器HTML代码放置在帖子内，改变CSS选择器 #player 的 left 和 top 属性定位播放器位置；

（二）audio 标签要求 id="aud"；

（三）如果有视频且需要与音频同步管理，要求视频 class="vid"；

（四）旋转按钮需要一张合适的背景图片。按钮尺寸的改变请通过修改 #player 选择器的 CSS变量 --btnSize 的赋值，px像素单位；

（五）假若帖子有其它需要通过 CSS变量 --state 进行控制，请修改JS代码 mState 函数的 player.style.setProperty('--prg',...) 中的 player 为帖子容器元素的 id，例如 tiezi

小辣椒

新产品出来了，黑黑厉害的~~~

亚伦影音工作室

马老师端午节安康！太漂亮了，我收藏了！

马黑黑

亚伦影音工作室 发表于 2024-6-10 11:47
马老师端午节安康！太漂亮了，我收藏了！

节日好

马黑黑

醉美水芙蓉 发表于 2024-6-10 11:38
真漂亮！老师端午安康！

马黑黑

小辣椒 发表于 2024-6-10 11:46
新产品出来了，黑黑厉害的~~~

樵歌

新创意层出不穷！看来是很有用的。

樵歌

端午安康

                               
登录/注册后可看大图

马黑黑

樵歌 发表于 2024-6-10 17:39
端午安康

蟹蟹

红影

这个应该是复习呢，非常清晰的思路，很漂亮

红影

还考虑了视频和其他元素的加载，非常细致

马黑黑

红影 发表于 2024-6-10 20:08
还考虑了视频和其他元素的加载，非常细致

顺带的

马黑黑

红影 发表于 2024-6-10 20:07
这个应该是复习呢，非常清晰的思路，很漂亮

有所不同的

红影

马黑黑 发表于 2024-6-10 20:15
顺带的

这样的顺带很周到

红影

马黑黑 发表于 2024-6-10 20:16
有所不同的

嗯嗯，效果一样漂亮

马黑黑

红影 发表于 2024-6-10 22:09
这样的顺带很周到

周到不周到不知道，只是手到

马黑黑

红影 发表于 2024-6-10 22:10
嗯嗯，效果一样漂亮

我准备封装一下，不过歌词的动画或许有所不同

红影

马黑黑 发表于 2024-6-10 22:28
周到不周到不知道，只是手到

心意也到了