中间挖空的光盘播放器
这个播放器的好处是代码量少。如果需要歌词显示的稍微加工一下即可。代码：<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>
黒黑辛苦，这个播放器肯定我很喜欢的，晚上上来仔细看看 这个播放器代码很漂亮，也是很喜欢用的一个播放器代码{:4_187:} 红影 发表于 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播放器代码设置手动播放有一个重要的原因是，手机直接打开会产生流 ...
目前真正能做到自动播放的似乎就是网易云音乐的播放器了。它从底层突破浏览器的限制，且用框架方式构建。 终于看见这个我喜欢的方法了。谢谢老黑。辛苦了！{:4_191:} 加林森 发表于 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
样式呢是自然挖空的，不想以前的用其他方式
嗯，空了我比较一下，学习学习{:4_187:}
页:
[1]
2