2013-02-26 119 views
2

我希望能夠使用JavaScript和HTML5元素從回調函數播放音頻文件。從我閱讀的內容來看,大多數移動設備播放HTML5音頻的唯一方式是通過用戶交互(即按鈕點擊等)。從回撥的移動設備播放HTML5音頻

我的方案略有不同。按鈕單擊事件使用回調函數進行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(); 

回答

4

你可以嘗試將兩者發聲到單個音頻文件中,然後使用回調排隊並在正確的位置播放。

沿着這條路線,您可以在初始用戶點擊(開始處有空白空間)時開始播放聲音,然後立即暫停播放(從播放事件開始播放)。一旦回調到來,將currentTime設置爲您想要播放的音軌上的位置並開始播放。玩這種方式應該可以,因爲初始播放呼叫發生在用戶操作上。

+0

這似乎是一個不錯的主意。移動設備中「play」限制的主要原因是爲了防止不必要的*加載佔用數據配額的文件。如果您可以通過用戶操作觸發一次「播放」,只要您不更改源,您可以在程序中自由重新播放它。 – apsillers 2013-06-25 17:06:28

+0

嗨,我授予這個答案,因爲我已經解決了這個問題。在用戶活動中,我玩過並立即暫停了可能播放的不同聲音,並在回調回復時恢復了合適的聲音 – link64 2013-07-25 23:19:03

0

HTML5音頻標籤,幾乎所有的智能手機瀏覽器,這些天

支持嘗試

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

謝謝,但問題是關於如何在播放聲音之前解決需要某種形式的用戶輸入的限制。就我而言,用戶點擊執行ajax請求的按鈕,並根據該請求播放不同的聲音。目前,這似乎不可能,並想知道如果有人已經解決了這個問題 – link64 2013-02-27 21:44:01

1

爲了擴大對德里克的答案,這裏是jQuery代碼來做到這一點對於一個給定audio元素:

<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); 
    ... 

然後在你的阿賈克斯done()功能,你可以像你一樣玩它:

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