通過回調從移動設備播放HTML5音頻

Question

我希望能夠使用JavaScript和HTML5元素通過回調函數播放音頻文件。 根據我的閱讀，大多數移動設備播放HTML5音頻的唯一方法是通過用戶交互（即按鈕單擊等）。

我的情況略有不同。 button click事件使用回調函數進行ajax調用，根據返回的結果，應該播放不同的聲音。 這在桌面瀏覽器上可以正常工作，但是android和iPad似乎都不支持此功能。

有人知道任何解決方法嗎？

示例代碼顯示如何初始化音頻對象等：

    var sound = new Audio('Sample.wav');
    var sound2 = new Audio('Sample2.wav');

/// Button events etc here, stock standard stuff

    function MyCallBack(e)
    {
      if(e.someValue)
       sound.play();
      else
       sound2.play();
    }

編輯：我已經使用下面概述的類似解決方案解決了這個問題。 在播放用戶事件時，我立即暫停了聲音。 回調返回后，我將繼續播放適當的聲音

 hit.play(); hit.pause(); fail.play(); fail.pause();

Answer 1

您可以嘗試將兩種聲音都放在一個音頻文件中，然后使用回調將其排隊並在正確的位置播放。

沿此路線，您可以在最初的用戶單擊時開始播放聲音（開頭處有空白），然后立即暫停它（從播放事件開始以確保它開始播放）。 回調進入后，將currentTime設置為要播放的音軌上的位置並開始播放。 以這種方式播放應該可以，因為最初的播放呼叫是在用戶操作上發生的。

Answer 2

為了擴展Derek的答案，以下是針對給定audio元素實現此目標的jQuery代碼：

<audio preload="auto" id="yourHTMLaudio">
    <source src="/sounds/youraudio.ogg" type="audio/ogg">
    <source src="/sounds/youraudio.mp3" type="audio/mpeg">
    <source src="/sounds/youraudio.wav" type="audio/wav">
</audio>

在按鈕的click事件上，調用以下命令：

$("#yourbutton").on("click", function() {
    ...
    $("#yourHTMLaudio").trigger('play').trigger('pause').prop("currentTime", 0);
    ...

然后，在Ajax done()函數中，可以像平常一樣播放它：

    ...
    $.ajax({
        ...
    }).done(function(msg) {
        ...
        $("#yourHTMLaudio").trigger('play');
        ...
    });
    ...
});

Answer 3

如今，幾乎所有智能手機瀏覽器都支持HTML5音頻標簽

嘗試

    <audio autoplay="autoplay" controls="controls">  
       <source src="music.ogg" />  
       <source src="music.mp3" />  
    </audio>