PhoneGap / Cordova 應用中 HTML5 Audio 標簽無聲解決：改用 Media API 實現原生播放

現象：HTML5 <audio> 標簽在瀏覽器正常播放，但在 PhoneGap/Cordova 模擬器/真機上無聲。原因：WebView 音頻管道受限、格式支持差、延遲高。

解決方案：Cordova Media Plugin

使用原生音頻通道，支持後台播放、混音、精確控制。

安裝插件

cordova plugin add cordova-plugin-media

JavaScript 代碼重構

// 原 HTML
// <audio id="buttonover"><source src="sounds/cartoon008.ogg"></audio>

// 新邏輯
var media = new Media('sounds/cartoon008.ogg',
    function() { console.log('Play success'); },   // successCallback
    function(err) { console.error('Play error', err); } // errorCallback
);

function playSound() {
    media.play(); // 異步播放
}

// 可選：釋放資源
function cleanup() {
    media.release();
}

關鍵注意點

進階：低延遲音效池

遊戲場景建議使用 cordova-plugin-nativeaudio 預加載音效到內存，實現毫秒級觸發：

Window.plugins.NativeAudio.preloadSimple('click', 'sounds/click.mp3', onSuccess, onError);
Window.plugins.NativeAudio.play('click');

總結

• WebView <audio> 移動端不可靠，棄用。
• cordova-plugin-media 通用音樂/長音頻。
• cordova-plugin-nativeaudio 短音效/遊戲。

選對工具，讓混合應用音頻體驗媲美原生。