Safari上的HTML5音頻標記有延遲

我正在嘗試使用html標記完成一個簡單的類似塗鴉的行爲，其中一個mp3/ogg聲音響起，點擊。它應該可以在Firefox，Safari和Safari iPad上運行，並且非常適合。Safari上的HTML5音頻標記有延遲

我已經試過許多方法，並已回落到這一點：

HTML

<span id="play-blue-note" class="play blue" ></span> 
    <span id="play-green-note" class="play green" ></span> 


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="blue.mp3" /> 
     <source src="blue.ogg" /> 
     <!-- now include flash fall back --> 
    </audio> 

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="green.mp3" /> 
     <source src="green.ogg" /> 
    </audio>

function addSource(elem, path) { 
    $('<source>').attr('src', path).appendTo(elem); 
} 

$(document).ready(function() { 


    $('body').delegate('.play', 'click touchstart', function() { 
     var clicked = $(this).attr('id').split('-')[1]; 

     $('#' + clicked + '-note').get(0).play(); 



    }); 

});

實際上，你可以看到在IGN整個演示.com.uy/loog/

這似乎在Firefox下工作得很好，但Safari每當點擊時似乎都有延遲，即使點擊幾次並且音頻文件已加載。在iPad上的Safari上，它的表現幾乎不可預測。

此外，當我在本地進行測試時，Safari的性能似乎有所提高，我猜Safari每次都會下載文件。這可能嗎？我怎樣才能避免這種情況？謝謝！

來源

2012-03-21 Nacho

嘿，關於Safari的問題的任何輸入？：S – Nacho 2012-03-22 12:45:35

當前答案是正確的，根據他們的處置，完全符合[此前的答案]（http://stackoverflow.com/a/7972609/517815）在類似的線程。最有效的解決方法，正如作者所引用的和[此線程中的此答案]（http：// stackoverflow。com/a/9960247/517815），的確將您的所有行爲都打包成一個文件，並在不同的框架中調用它。這是很多額外的工作，但當蘋果做出其他人被迫遵守的設計決定時會發生什麼。（讓我知道你是否更喜歡這個答案） – MrGomez 2012-04-02 23:35:35

@ign是否可以在桌面Safari上同時播放多個音頻？不幸的是，我遇到了桌面Safari的延遲。 FF和Chrome工作正常。 – trainoasis 2014-05-07 11:42:14

我剛剛在幾分鐘前回答了另一個iOS/<audio>問題。似乎也適用於此處：

在iOS設備上預加載<audio>和<video>已禁用以節省帶寬。

在Safari iOS上（對於所有設備，包括ipad公司），其中用戶可以是蜂窩網絡上，並且每數據單元，預緊和自動播放被充電被禁用。直到用戶啓動它纔會加載數據。

來源：Safari Developer Library

來源

2012-03-21 19:24:47 j08691

謝謝。所以，我想沒有辦法在iPad上獲得幾乎實時的反饋，對吧？ Safari上的任何見解？ – Nacho 2012-03-21 19:39:06

Safari瀏覽器的問題是，它把一個請求，每一次對音頻文件進行播放。您可以嘗試創建一個HTML5緩存清單。不幸的是，我的經驗是，你一次只能向緩存中添加一個音頻文件。解決方法可能是將所有音頻文件按順序合併到一個音頻文件中，然後根據所需聲音開始在特定位置播放。您可以創建一個間隔來跟蹤當前的播放位置，並在達到某個時間戳後暫停播放。

瞭解更多關於此清單創建HTML5緩存：

http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

希望它能幫助！

來源

2012-03-31 22:28:02 Reinaldo

感謝您的洞察力。儘管我試圖實現一個簡單的任務，但這聽起來太麻煩了。 – Nacho 2012-04-01 20:28:33

我不認爲你每次都是這個請求的正確答案，但我認爲你可以把所有聲音效果放到一個文件中，並在不同的上下文中進行偏移播放，如指定播放範圍部分https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video。我想知道這將與多個具有相同來源的

這意味着，通過快速重複的聲音，如玩家射擊，子彈撞擊等，重複頻率通常不會播放。另一個潛在的解決方法可能是將多個

蘋果決定（爲了省錢celluar）不預先加載<audio>和<video>HTML元素。

從the Safari Developer Library：

在Safari iOS上（對於所有設備，包括ipad公司），其中用戶可以是蜂窩網絡上，並且每個數據單元，預緊和自動播放被充電被禁用。直到用戶啓動它纔會加載數據。這意味着JavaScript的play()和load()方法也無活性直到用戶開始播放，除非play()或load()方法由用戶操作觸發的。換句話說，用戶啓動的Play按鈕有效，但onLoad =「play（）」事件不會。

此播放電影：<input type="button" value="Play" onClick="document.myMovie.play()">

這確實在iOS什麼：<body onLoad="document.myMovie.play()">

我不認爲你可以繞過這個限制，但你也許能至。

切記：谷歌是你最好的朋友。

更新：一些試驗後，我找到了一種方法來播放<audio>用JavaScript：

var vid = document.createElement("iframe"); 
vid.setAttribute('src', "http://yoursite.com/yourvideooraudio.mp4"); // replace with actual source 
vid.setAttribute('width', '1px'); 
vid.setAttribute('height', '1px'); 
vid.setAttribute('scrolling', 'no'); 
vid.style.border = "0px"; 
document.body.appendChild(vid);

注：我只跟01嘗試。

更新2：jsFiddle here。似乎工作。

來源

2012-04-02 20:00:12

問題不在於如何播放音頻，這是爲什麼會有延遲。 – j08691 2012-04-02 20:39:01

@ j08691我說那 – 2012-04-02 20:39:43

你的回答只是我已經發布的一個迴流，以及如何播放音頻文件的片段。我錯過了一些新的或不同的東西，你真正回答了這個問題嗎？ – j08691 2012-04-02 20:41:50

的音頻文件被加載一次，然後緩存..反覆播放的聲音，即使在頁面刷新，沒有引起進一步的Safari瀏覽器的HTTP請求..

我只是看看你的聲音之一的音頻編輯器 - 在文件的開頭有少量的沉默..這將表現爲延遲..

是Web Audio API是否可行的選項？

來源

2012-04-02 21:49:57 Lloyd

謝謝，我不認爲延遲是由沉默造成的該文件，但我會檢查Web Audio API。 – Nacho 2012-04-03 15:11:53

我有這個相同的問題。奇怪的是我正在預加載文件。但是，使用WiFi可以很好地播放，但在手機數據上，開始前會有很長的延遲。我認爲這與加載速度有關，但在加載所有圖像和音頻文件之前，我不會開始播放我的場景。任何建議都會很棒。（我知道這不是一個答案，但我認爲做一個dup的帖子更好）。

來源

2013-11-04 04:23:43

Safari上的HTML5音頻標記有延遲

回答

相關問題