Java Web 跨瀏覽器聲音播放方案：HTML5 Audio + Embed 降級兼容 IE/360/移動端

需求

• 按鈕點擊播放不同音效 (多個按鈕、多個音頻)。
• 兼容 IE、360、Firefox、Chrome、移動端瀏覽器。
• HTML5 `

方案對比

推薦：雙模式降級方案 (Audio 優先 + Embed 兼容)

核心代碼

按鈕 1
按鈕 2
警報

關鍵點解析

• MIME 類型檢測**：非 Windows 平台優先用 `audio/mpeg` (原生支持)，Windows/IE 用 `application/x-mplayer2` (WMP ActiveX)。
• 隱藏 embed**：`hidden="true" width="1" height="1" style="position:absolute;left:-9999px"` 多重隱藏。
• 自動播放**：`autostart="true"` 插入 DOM 即播放。
• 多音頻並發**：每次點擊替換 `#soundContainer` 內容，簡單場景足夠；複雜場景需預加載多個 `

移動端特殊處理

1. 用戶交互解鎖**：首次播放必須在 `touchstart`/`click` 事件中調用 `audio.play()` 或插入 `embed`。
2. 音頻精靈圖**：將多個短音效合成單一文件，播放時設置 `currentTime` 和 `duration`，減少請求、解決並發限制。
3. 格式備選**：提供 `.mp3` (通用) + `.ogg` (Firefox/Chrome) + `.wav` (IE/WMP)，服務端按 `Accept` 頭或 UA 返回。

現代最佳實踐 (2023+)

// 統一使用 HTML5 Audio，優雅降級
const audioPool = new Map(); // URL -> HTMLAudioElement

function playSoundModern(url) {
    let audio = audioPool.get(url);
    if (!audio) {
        audio = new Audio(url);
        audio.preload = 'auto';
        audioPool.set(url, audio);
    }
    // 克隆以支持快速重複播放 (可選)
    const clone = audio.cloneNode();
    clone.play().catch(e => {
        // 自動播放被阻擋：提示用戶交互、或降級 embed
        console.warn('Auto-play blocked:', e);
        fallbackEmbedPlay(url);
    });
}

function fallbackEmbedPlay(url) { /* 上述 embed 方案 */ }

**原則**：優先 HTML5 Audio (標準、無插件、Web Audio API 基礎)，檢測失敗/阻擋時降級 Embed，移動端引導用戶交互解鎖。