微件:AudioPlayer：修订间差异
来自植物大战僵尸杂交版Wiki
更多操作
创建页面，内容为“<includeonly> <style> .audio-player { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #f5f5f5; border-radius: 20px; border: 1px solid #e0e0e0; cursor: pointer; user-select: none; transition: all 0.2s; } .audio-player:hover { background: #e8f5e9; border-color: #4CAF50; } .audio-player.playing { background: #c8e6c9; border-color: #4CAF50; } .audio-player-icon { font-si…” |
无编辑摘要 |
||
| 第32行： | 第32行： | ||
<span class="audio-player" onclick="toggleAudio('<!--{$id|escape:'html'}-->', '<!--{$file|escape:'html'}-->', this)"> | <span class="audio-player" onclick="toggleAudio('<!--{$id|escape:'html'}-->', '<!--{$file|escape:'html'}-->', this)"> | ||
<span class="audio-player-icon" id="audio-icon-<!--{$id|escape:'html'}-->"> | <span class="audio-player-icon" id="audio-icon-<!--{$id|escape:'html'}-->"></span> | ||
<span class="audio-player-text" id="audio-text-<!--{$id|escape:'html'}-->"><!--{$label|default:'播放音效'}--></span> | <span class="audio-player-text" id="audio-text-<!--{$id|escape:'html'}-->"><!--{$label|default:'播放音效'}--></span> | ||
</span> | </span> | ||
| 第48行： | 第48行： | ||
if (window.audioPlayers[id] && !window.audioPlayers[id].paused) { | if (window.audioPlayers[id] && !window.audioPlayers[id].paused) { | ||
window.audioPlayers[id].pause(); | window.audioPlayers[id].pause(); | ||
icon.textContent = ' | icon.textContent = ''; | ||
btn.classList.remove('playing'); | btn.classList.remove('playing'); | ||
window.currentAudio = null; | window.currentAudio = null; | ||
| 第61行： | 第61行： | ||
window.currentBtn.classList.remove('playing'); | window.currentBtn.classList.remove('playing'); | ||
var prevIcon = window.currentBtn.querySelector('.audio-player-icon'); | var prevIcon = window.currentBtn.querySelector('.audio-player-icon'); | ||
if (prevIcon) prevIcon.textContent = ' | if (prevIcon) prevIcon.textContent = ''; | ||
} | } | ||
} | } | ||
| 第78行： | 第78行： | ||
audio.onended = function() { | audio.onended = function() { | ||
icon.textContent = ' | icon.textContent = ''; | ||
btn.classList.remove('playing'); | btn.classList.remove('playing'); | ||
window.currentAudio = null; | window.currentAudio = null; | ||
| 第84行： | 第84行： | ||
}; | }; | ||
}).catch(function() { | }).catch(function() { | ||
icon.textContent = ' | icon.textContent = ''; | ||
text.textContent = '加载失败'; | text.textContent = '加载失败'; | ||
}); | }); | ||