难却 - 平生不晚
<!--Discuz 论坛发帖专用 - 现代化玻璃拟态音乐播放器
使用说明：
1. 复制以下所有代码。
2. 在 Discuz 发帖编辑器中切换到“纯文本/HTML源码”模式。
3. 替换 src 中的音频链接和 img 中的封面链接。
4. 确保论坛权限允许发布 HTML 代码。
-->
<div style="
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
width: 320px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
color: white;
margin: 20px auto;
position: relative;
overflow: hidden;
text-align: center;
">
<!-- 背景装饰光斑 -->
<div style="
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
"></div>
<!-- 内容区域 -->
<div style="position: relative; z-index: 1;">
<!-- 唱片封面容器 -->
<div style="
width: 180px;
height: 180px;
margin: 0 auto 20px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
animation: rotate-disc 10s linear infinite;
/* 默认暂停动画，播放时通过JS添加 class 或手动控制较难，这里使用CSS常转模拟黑胶效果，
若需精确控制播放暂停动画，需JS支持，但Discuz限制JS，故采用视觉常驻旋转或静态美图为宜。
此处为了美观，设为缓慢旋转，若介意可删除 animation 属性 -->
animation-play-state: paused;
" id="disc-cover">
<!-- 封面图片：请替换下面的 src -->
<img src="data/attachment/album/202609/01/160419v2ofcfu2gs33uofz.jpg" alt="音乐封面" style="
width: 100%;
height: 100%;
object-fit: cover;
display: block;
">
<!-- 中心圆点 -->
<div style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #2d3436;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.5);
"></div>
</div>
<!-- 歌曲信息 -->
<h3 style="
margin: 0 0 5px;
font-size: 18px;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">难却</h3>
<p style="
margin: 0 0 20px;
font-size: 14px;
opacity: 0.8;
font-weight: 300;
">平生不晚</p>
<!-- 自定义控制按钮区域 (视觉层) -->
<div style="
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 15px;
">
<!-- 播放/暂停按钮视觉提示 (实际功能由下方 audio controls 提供，此处仅为美化引导) -->
<div style="
font-size: 12px;
opacity: 0.6;
background: rgba(0,0,0,0.2);
padding: 4px 10px;
border-radius: 12px;
">点击下方原生控件播放</div>
</div>
<!-- 核心音频标签 -->
<!--
controls: 显示浏览器原生控件（最稳定兼容 Discuz）
preload: 预加载元数据
注意：为了保持 UI 统一，我们可以尝试隐藏原生控件的大部分内容，只保留进度条，
但在不同浏览器下表现不一。最稳妥的“好看”方式是保留原生控件，但通过 CSS 美化容器。
进阶技巧：如果 Discuz 允许少量 JS，可以添加 onclick 事件控制播放并旋转封面。
下面代码包含一段简单的内联 JS 尝试控制封面旋转（视论坛过滤规则而定，若被过滤则仅作为静态播放器）。
-->
<audio id="my-audio" controls autoplay loop preload="metadata" style="
width: 100%;
height: 40px;
outline: none;
filter: invert(1) hue-rotate(180deg); /* 简单反转颜色以适配深色背景，视浏览器支持情况 */
border-radius: 20px;
background: rgba(255,255,255,0.1);
"
onplay="document.getElementById('disc-cover').style.animationPlayState='running'"
onpause="document.getElementById('disc-cover').style.animationPlayState='paused'"
>
<!-- 请替换为你的音频文件直链 -->
<source src="https://www.joy127.com/url/158262.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</div>
<!-- 内部样式定义 (部分论坛可能过滤 style 标签，若被过滤，以上内联样式已足够) -->
<style>
@keyframes rotate-disc {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 针对 Webkit 浏览器的音频控件微调 */
audio::-webkit-media-controls-panel {
background-color: rgba(255, 255, 255, 0.2);
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
color: white;
}
</style>
</div> https://www.joy127.com/url/158262.mp3
页:
[1]