查看“︁微件:AudioPlayer”︁的源代码

<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-size: 18px;
    line-height: 1;
}
.audio-player-text {
    font-size: 13px;
    color: #555;
}
</style>

<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>
    <span class="audio-player-text" id="audio-text-<!--{$id|escape:'html'}-->"><!--{$label|default:'播放音效'}--></span>
</span>

<script>
window.audioPlayers = window.audioPlayers || {};
window.currentAudio = window.currentAudio || null;
window.currentBtn = window.currentBtn || null;

window.toggleAudio = function(id, file, btn) {
    var icon = document.getElementById('audio-icon-' + id);
    var text = document.getElementById('audio-text-' + id);

    // 如果正在播放同一个，暂停
    if (window.audioPlayers[id] && !window.audioPlayers[id].paused) {
        window.audioPlayers[id].pause();
        icon.textContent = '▶️';
        btn.classList.remove('playing');
        window.currentAudio = null;
        window.currentBtn = null;
        return;
    }

    // 停止之前的播放
    if (window.currentAudio && window.currentAudio !== window.audioPlayers[id]) {
        window.currentAudio.pause();
        if (window.currentBtn) {
            window.currentBtn.classList.remove('playing');
            var prevIcon = window.currentBtn.querySelector('.audio-player-icon');
            if (prevIcon) prevIcon.textContent = '▶️';
        }
    }

    // 创建或复用 Audio 对象
    if (!window.audioPlayers[id]) {
        window.audioPlayers[id] = new Audio(file);
    }

    var audio = window.audioPlayers[id];
    audio.play().then(function() {
        icon.textContent = '⏸';
        btn.classList.add('playing');
        window.currentAudio = audio;
        window.currentBtn = btn;

        audio.onended = function() {
            icon.textContent = '▶️';
            btn.classList.remove('playing');
            window.currentAudio = null;
            window.currentBtn = null;
        };
    }).catch(function() {
        icon.textContent = '❌';
        text.textContent = '加载失败';
    });
};
</script>
</includeonly>