|
|
| （未显示同一用户的2个中间版本） |
| 第1行： |
第1行： |
| <includeonly>
| | {{#if:{{{音频|}}}| |
| {{#css: | | <htmltag tagname="audio" src="{{filepath:{{{音频}}}}}" class="audio-block" controls></htmltag> |
| /* 音频播放器样式（使用 CSS 扩展嵌入） */
| | | |
| .custom-audio-player {
| | <div style="color:red">未填写音频文件</div> |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| background: #f5f5f5;
| |
| border-radius: 40px;
| |
| padding: 8px 16px;
| |
| max-width: 400px;
| |
| border: 1px solid #ddd;
| |
| font-family: sans-serif;
| |
| } | |
| .custom-audio-player audio {
| |
| display: none; /* 隐藏原生控件，使用自定义按钮 */
| |
| } | |
| .custom-audio-player .play-pause {
| |
| background: #4CAF50;
| |
| border: none;
| |
| color: white;
| |
| 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;
| |
| border-radius: 20px;
| |
| font-size: 14px;
| |
| margin-left: auto;
| |
| transition: 0.2s;
| |
| }
| |
| .custom-audio-player .download-btn:hover {
| |
| background: #0b7dda;
| |
| }
| |
| .custom-audio-player .filename {
| |
| color: #333;
| |
| font-size: 14px;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| white-space: nowrap;
| |
| max-width: 150px;
| |
| }
| |
| }} | | }} |
| </includeonly>
| |
| <div class="custom-audio-player" data-audio="{{filepath:{{{音频|}}}}}">
| |
| <audio src="{{filepath:{{{音频|}}}}}" preload="none"></audio>
| |
| <button class="play-pause" title="播放/暂停"></button>
| |
| <span class="filename">{{PAGENAME:{{{音频|}}}}}</span>
| |
| <a class="download-btn" href="{{fullurl:File:{{{音频|}}}}}" target="_blank" title="下载">下载</a>
| |
| </div>
| |
