用jquery加載多個音頻文件並完成回調

我在頁面中使用了很多聲音，並且我決定將它們加載到聲音圖標上，以便它可以在移動設備/觸摸設備上使用。看到代碼用jquery加載多個音頻文件並完成回調

var greenBetsound = document.getElementById('greenBet_sound'); 
jQuery('.soundIcon').click(function(){ 
    if(!jQuery('.soundIcon').hasClass('soundIconOn')){ 
     jQuery('body').addClass('audioOn'); 
     jQuery('.soundIcon').removeClass('soundIconOff').addClass('soundIconOn'); 
     greenBetsound.load(); 
     firstReelStopsound.load(); 
     secondReelStopsound.load(); 
     thirdReelStopsound.load(); 
     fourthReelStopsound.load(); 
     fifthReelStopsound.load(); 
     creditsTranferWithNoClubMeter.load(); 
     bonusGamesStart.load(); 
     jackpotSound.load(); 
     winline1Combsound.load(); 
     winline2Combsound.load(); 
     winline3Combsound.load(); 
     winline4Combsound.load(); 
     winline5Combsound.load(); 
     winline6Combsound.load(); 
     mysterycountsound.load(); 
    }else{ 
     jQuery('body').removeClass('audioOn'); 
     jQuery('.soundIcon').removeClass('soundIconOn').addClass('soundIconOff'); 
    } 
});

這裏下面是標記

<audio id="greenBet_sound" src="sounds/sound21.mp3" preload="auto"></audio>

我怎樣才能把它們都在一行一次加載，並且對完成加載，所以我允許用戶導航到一個回調網頁只有在聲音完全加載後？

謝謝。

來源

2017-02-06 Anahit Ghazaryan

它不重複，我的情況是不同的@ guest271314 –

如何在在鏈接的問題，從不同的答案現在的問題要求？使用'Promise.all（）'，'Promise'構造函數加載所有媒體資源，當加載所有資源時，使用鏈接的'.then（）'執行任務。 – guest271314

我不確定答案中提供的代碼是否適用於移動設備。另外，我不需要在彼此之後只是加載@ guest271314來播放它們。並且當所有音頻都將被完全加載而不是每個都有回調 –

我怎樣才能把它們都在一行在加載一次，並有回調上完全加載的，所以我允許用戶導航到網頁後，才聲音將被完全加載？

一種方法是使用Audio構造函數或document.createElement("audio")創建AudioNode和jQuery.holdReady()。創建一個數組來存儲音頻節點，將canplay事件附加到AudioNode。在canplay事件中檢查包含音頻節點的數組是否等於包含媒體源的數組，如果爲true，則調用jQuery.holdReady(false)。然後您可以使用Array.prototype.slice()創建音頻節點的副本，Array.prototype.shift()按順序播放音頻節點。

jQuery.holdReady(true); 
 

 
const audioAddress = [ 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/sound21.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/toBasic.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop1.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop2.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop3.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop4.mp3", 
 
    "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop5.mp3" 
 
]; 
 

 
const tracks = []; 
 

 
audioAddress.forEach(function(src) { 
 
    var audio = document.createElement("audio"); 
 
    audio.oncanplay = function() { 
 
    tracks.push(this); 
 
    if (tracks.length === audioAddress.length) { 
 
     jQuery.holdReady(false); 
 
    } 
 
    } 
 
    audio.src = src; 
 
}); 
 

 
$(function() { 
 
    let mix = tracks.slice(0); 
 

 
    function playTracks() { 
 
    let track = mix.shift(); 
 
    track.onended = function() { 
 
     if (mix.length) { 
 
     playTracks(); 
 
     } 
 
    } 
 
    track.play(); 
 
    } 
 

 
    playTracks(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

來源

2017-02-08 17:48:05 guest271314

用jquery加載多個音頻文件並完成回調

回答

相關問題