模板:音频：修订间差异

2026年3月5日 (四) 10:21的版本

   <audio src="" controls preload="none">
       您的浏览器不支持 audio 标签。
   </audio>
   <a class="download-link" href="模板:Fullurl:File:" target="_blank">下载</a>

@@ 第1行： / 第1行： @@
-<includeonly>
+<includeonly>{{#css:
-{{#css:
+/* 让音频播放器宽度自适应容器，并添加一些间距 */
-/* 音频播放器样式（使用 CSS 扩展嵌入） */
+audio {
-.custom-audio-player {
+     width: 100%;
-     display: flex;
-    align-items: center;
-    gap: 10px;
-    background: #f5f5f5;
-    border-radius: 40px;
-    padding: 8px 16px;
      max-width: 400px;
-     border: 1px solid #ddd;
+     margin: 5px 0;
-     font-family: sans-serif;
+     border-radius: 8px;
 }
-.custom-audio-player audio {
+.download-link {
-     display: none; /* 隐藏原生控件，使用自定义按钮 */
+     display: inline-block;
-}
+     margin-left: 10px;
-.custom-audio-player .play-pause {
+     font-size: 14px;
-    background: #4CAF50;
+     background: #f0f0f0;
-     border: none;
+     padding: 4px 10px;
-    color: white;
+     border-radius: 20px;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-     font-size: 18px;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: 0.2s;
-}
-.custom-audio-player .play-pause:hover {
-     background: #45a049;
-}
-.custom-audio-player .play-pause.playing::before {
-     content: "⏸️"; /* 暂停图标 */
-}
-.custom-audio-player .play-pause::before {
-     content: "▶️"; /* 播放图标 */
-}
-.custom-audio-player .download-btn {
-    background: #2196F3;
-    color: white;
      text-decoration: none;
-     padding: 6px 12px;
+     color: #0645ad;
-     border-radius: 20px;
+     border: 1px solid #ccc;
-    font-size: 14px;
-    margin-left: auto;
-    transition: 0.2s;
 }
-.custom-audio-player .download-btn:hover {
+.download-link:hover {
-     background: #0b7dda;
+     background: #e0e0e0;
-}
-.custom-audio-player .filename {
-    color: #333;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 150px;
 }
-}}
+}}</includeonly><div style="display: flex; align-items: center; flex-wrap: wrap;">
-</includeonly>
+    <audio src="{{filepath:{{{音频|}}}}}" controls preload="none">
-<div class="custom-audio-player" data-audio="{{filepath:{{{音频|}}}}}">
+        您的浏览器不支持 audio 标签。
-<audio src="{{filepath:{{{音频|}}}}}" preload="none"></audio>
+    </audio>
-<button class="play-pause" title="播放/暂停"></button>
+    <a class="download-link" href="{{fullurl:File:{{{音频|}}}}}" target="_blank">下载</a>
-<span class="filename">{{PAGENAME:{{{音频|}}}}}</span>
-<a class="download-btn" href="{{fullurl:File:{{{音频|}}}}}" target="_blank" title="下载">下载</a>
 </div>