空巷

马黑黑 · 发表于 2024-1-28 18:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-1-28 18:22

代码

<style>
.mybox { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 685px; background: url('https://638183.freep.cn/638183/t24/webp/ksxl.webp'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; display: grid; place-items: center; }
.mybox video { position: absolute; bottom: 0px; width: 300px; height: 300px; object-fit: cover; border-radius: 50%; opacity: 1; mix-blend-mode: lighten; }
#mplayer { position: absolute; bottom: 10px; width: 300px; text-align: center; color: lightyellow; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 100%; accent-color: lightyellow; opacity: .9; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; clip-path: circle(48%); opacity: .7; transition: filter .65s; cursor: pointer; animation: rot 5s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(300deg); }
@keyframes rot { to { transform: rotate(360deg);} }
</style>
<div class="mybox">
<audio src="https://music.163.com/song/media/outer/url?id=572547816" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/01/91/5b4d5e7a6b4a6.mp4" loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/small/mufuz2.jpg" alt="" title="播放/暂停" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" />
</div>
</div>
<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>

复制代码

马黑黑 · 发表于 2024-1-28 18:22

本帖最后由马黑黑于 2024-1-28 20:42 编辑

本帖所使用的JS文档适用于纯音乐帖子，或不需要显示歌词的帖子。它不是插件，也不是组件，它只是JS语句的简单分离：将处理复杂事件的众多语句剥离开来，形成一个文档，调用后，调用页面最简洁的时候只需一句代码：

<script src="https://638183.freep.cn/638183/web/js/mpku.js" charset="utf-8"></script>

但 discuz! 论坛不支持上述引用方式，需要酱紫：

<script>
var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/js/mpku.js';
sf.charset = 'utf-8';
document.querySelector('body').appendChild(sf);
</script>

不论引用方式如何，mpku.js 都有约定，简述如下：

（一）对帖子主元素没有任何要求，组织帖子内容的元素有没有 id 、有没有 class 都无所谓；

（二）对 audio 标签、video 标签没有任何 id、class 要求，mpku.js 接管页面中第一个 audio 标签、接管所有 video 标签的播放暂停（随第一个audio标签）；

（三）播放器UI由帖子或页面提供，CSS和HTML代码自己写，约定：① 播放器容器 id="mplayer" ；② range进度条 id="mprog" ；③ 控制按钮 id="btnplay" ；④ 播放器容器需要一个伪元素，content 属性值为 attr(data-tt)，具体做法请查看二楼代码中的CSS和对应的html代码；

（四）若需要其他CSS关键帧动画响应音频的播放暂停，仅需要在 animation 属性值中加上 var(--state) 即可；

（五）可以另外加入自己的控制音频播放的JS代码，比方说，有一个元素 id="mybtn"，帖子中的 audio 标签的 id="myaudio"，则可以通过语句

mybtn.onclick = () => myaudio.paused ? myaudio.play() : myaudio.pause();

进行控制，它不会与引用的JS冲突。