中间挖空的光盘播放器

马黑黑

这个播放器的好处是代码量少。如果需要歌词显示的稍微加工一下即可。代码：

<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; top: 10px;  font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <span id="disc"></span>
        <span id="lrcbox">歌曲名称</span>
</div>

<script>

let aud = new Audio();       
aud.src = '音乐地址';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()  => disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()  => disc.style.animationPlayState = 'paused');

</script>

小辣椒

黒黑辛苦，这个播放器肯定我很喜欢的，晚上上来仔细看看

红影

这个播放器代码很漂亮，也是很喜欢用的一个播放器代码

马黑黑

红影 发表于 2022-8-15 19:41
这个播放器代码很漂亮，也是很喜欢用的一个播放器代码

样式呢是自然挖空的，不想以前的用其他方式

马黑黑

小辣椒 发表于 2022-8-15 18:58
黒黑辛苦，这个播放器肯定我很喜欢的，晚上上来仔细看看

嗯，我已经用了好几次了

小辣椒

马黑黑 发表于 2022-8-15 21:06
嗯，我已经用了好几次了

手机看不见的，不能预览。现在电脑了

小辣椒

看见了就最近在做的，我今天就做了这个但上传后发微信要手动播放，论坛代码发可以直接出来

马黑黑

小辣椒 发表于 2022-8-15 21:42
看见了就最近在做的，我今天就做了这个但上传后发微信要手动播放，论坛代码发可以直接出来

一切依赖于浏览器的设定。自动播放是个难题。

小辣椒

马黑黑 发表于 2022-8-15 22:32
一切依赖于浏览器的设定。自动播放是个难题。

是的，只要可以播放就可以了，手动就手动只是点击一下的事情

马黑黑

小辣椒 发表于 2022-8-15 22:34
是的，只要可以播放就可以了，手动就手动只是点击一下的事情

关于自动播放，的确是浏览器的设定问题。我们可能不好理解一个问题，就是，现在活跃的浏览器，它们都一致认为媒体的播放器是访客，而不是网页拥有者。原因有好几个，其中之一是，尊重访客、不侵扰，之二是为访客节约高昂的网费。所以，即使标签里设定了自动播放属性，也可能被浏览器屏蔽，除非浏览器使用者做了媒体方面的设置。

小辣椒

马黑黑 发表于 2022-8-15 22:41
关于自动播放，的确是浏览器的设定问题。我们可能不好理解一个问题，就是，现在活跃的浏览器，它们都一致 ...

是的，我也是搜索了好几次这个问题，H5播放器代码设置手动播放有一个重要的原因是，手机直接打开会产生流量，消费者有的会有意见

马黑黑

小辣椒 发表于 2022-8-15 22:45
是的，我也是搜索了好几次这个问题，H5播放器代码设置手动播放有一个重要的原因是，手机直接打开会产生流 ...

目前真正能做到自动播放的似乎就是网易云音乐的播放器了。它从底层突破浏览器的限制，且用框架方式构建。

加林森

终于看见这个我喜欢的方法了。谢谢老黑。辛苦了！

马黑黑

加林森 发表于 2022-8-16 13:09
终于看见这个我喜欢的方法了。谢谢老黑。辛苦了！

这个已经投入使用好久了的

加林森

马黑黑 发表于 2022-8-16 13:18
这个已经投入使用好久了的

我不懂嘛。如果加图片后，中间的洞还在吗？我还没有试。

马黑黑

加林森 发表于 2022-8-16 13:24
我不懂嘛。如果加图片后，中间的洞还在吗？我还没有试。

这个洞，它背后是什么就是什么，它是透明的

加林森

哦。我现在在ps在制作了。

马黑黑

加林森 发表于 2022-8-16 19:57
哦。我现在在ps在制作了。

挺好

加林森

马黑黑 发表于 2022-8-16 19:58
挺好

嗯嗯。

红影

马黑黑 发表于 2022-8-15 21:06
样式呢是自然挖空的，不想以前的用其他方式

嗯，空了我比较一下，学习学习