在移動設備上預加載音頻

我有一些JS設置可以在點擊時播放聲音。我的問題是，在移動設備上點擊聲音時會加載，而不是在預加載後播放。我試圖使用html5preloader.js和jQuery AJAX調用預加載聲音，但移動設備似乎並不尊重這些函數。是否有可能通過javascript預加載聲音？下面是具有此功能的工作網站：http://huracan.lamborghini.com/#!/en/listen 在移動設備上預加載音頻

var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'audio/ding.mp3'); 

    audioElement.load() 

    $.get(); 

    $('.animation, .navigation ul li, h4').click(function() { 
     audioElement.play(); 
    }); 
var myLoader; 
    myLoader = new html5Preloader(); 
    myLoader.loadFiles('audio/ding.mp3','audio/ding.ogg');

來源

2014-02-12 Noah Damiani

使用jQuery，甚至使用純JavaScript你可以預載音頻沒有任何插件。我在這裏起草一個簡單的例子說明如何能夠使用jQuery來完成：

$("<audio>") 
    .error(function() { /* ... */ }) 
    .on("canplaythrough", function() { 
     $(this).prependTo($("body")); 
     this.play(); 
    }) 
    .attr("src", "/path/to/the/sound.mp3") 
    .attr("type", "audio/mpeg");

您可能要擴展上面的代碼包含一系列<source ...>元素來支持多個文件類型，添加錯誤處理等。 ..

的片段會發生什麼：

新<audio>元素是動態創建的，
2事件偵聽器附着（其中一個觸發「呃ror「，另一個是」canplaythrough「 - 這意味着瀏覽器已經預裝了足夠的數據以保證相對安全，因此它可以在不中斷的情況下播放整個音頻 - 您還可以使用」loadeddata「，當所有數據都預裝時），
和<audio>元素設置了兩個屬性，它們是聲音的路徑和音頻的類型。只要設置了屬性，瀏覽器就會開始下載音頻。

注意：當我使用類似的技術來預加載圖像時（使用$("<img>").load()），這在舊瀏覽器中導致了一些內存泄漏問題。有解決方法，但這是我想這個答案的範圍。

來源

2014-02-12 22:04:36

我將問題作爲一個移動問題介紹過，但是我沒有提及，當我問「是否可以通過JavaScript預載聲音？」時我不清楚的錯誤。感謝您的洞察力。 –

公平競賽，@諾阿。在移動設備上，你是對的，大多數實現都會在沒有用戶交互的情況下預先加載任何東西（甚至可能是官方規範的一部分）來節省帶寬。如果您已經找到預加載聲音的方法，您可能會發現以下方法很有用。我閱讀了A. Gloege在http://www.ibm.com/developerworks/library/wa-ioshtml5/上的'audio sprites'（朝文章底部）。這是他的jsfiddle.net/aarongloege/rQv5h/light/ – 2014-02-13 17:13:28

湯姆的回答應該對一些人有所幫助，而且這是我在使用之前發現它不適用於手機的方法。顯然，你不能在移動設備上預載媒體，必須有用戶交互來加載媒體。解決的辦法是比我預想的更簡單：

$("#audio").attr('src', 'audio/ding.mp3').on("playing",function(){ 
    loop(); //function to run simultaneously with sound 
}); 

$(".animation, .navigation ul li, h4").on("click tap",function(){ 
    document.getElementById("audio").play(); //click to trigger sound 
});

基本上我只是鏈接我要與音頻運行，使其只它的加載後運行的功能。希望這可以幫助任何有同樣問題的人。這不像預加載頁面那麼方便，但我至少能夠讓我的其他功能等待聲音加載之前加載。

來源

2014-02-13 16:16:31

在移動設備上預加載音頻

回答

相關問題