javascript - Precargue el archivo mp3 en la cola para evitar retrasos en la reproducción del siguiente archivo en la cola

jquery (2)

Aquí tienes El mayor desafío que tuve fue manejar el valor de this dentro del controlador . Establezca sus elementos <audio> en preload="none" . Mi guión carga la siguiente canción tan pronto como tocas una antes y reproduce automáticamente la siguiente canción una vez que termina la primera.

Si le preocupa Global Scope, simplemente póngalo en un IIFE. ¡Disfrutar!

ul{ list-style: none; }

<!DOCTYPE html> <html lang="en"> <meta name="description" content="HTML5 Media Auto Player Skeleton" /> <title>HTML5 Media Auto Player Skeleton</title> <style> </style> </head> <body> <main> <ul> <li class="album"> <h3 class="album-title">HTML5 Media Player w Auto Next</h3> </li> <li> <audio controls="controls" class="full-width" preload="metadata"> <source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.mp3" type="audio/mpeg"> <source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li> <audio controls="controls" class="full-width" preload="metadata"> <source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.mp3" type="audio/mpeg"> <source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li> <audio controls="controls" class="full-width" preload="metadata"> <source src="//rack.international/samples/crankRingtone.mp3" type="audio/mpeg"> <source src="//rack.international/samples/crankRingtone.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> </body> </html>

Estoy trabajando en un script donde estoy reproduciendo múltiples mp3 y cada archivo está en cola. Hay un ligero retraso en la reproducción del siguiente archivo .mp3, ya que lleva tiempo almacenar en el búfer / cargar el archivo.

¿Cómo puedo almacenar el siguiente archivo .mp3 que es la cola para que todos los archivos se ejecuten sin problemas y sin demora?

getData(1); function getData(id) { //Emty div $("#surah-wrapper").empty(); $.ajaxSetup({ cache: true, jsonpCallback: ''quranData'' }); // define ajax setup // Quran Text Type quran-uthmani | quran-simple | quran-simple-clean | quran-wordbyword $.getJSON("http://api.globalquran.com/surah/" + id + "/quran-uthmani?key=api_key&jsoncallback=?", { format: "jsonp" }, function(data) { if (id > 1) { $("<span class=''qspan qspan-bsm''>").html("بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ").appendTo("#surah-wrapper"); } $.each(data.quran, function(i, by) { $.each(by, function(verseNo, line) { //$("<p>").html(''(''+ line.surah+'':''+line.ayah+'') ''+line.verse).appendTo("#surah-wrapper"); $("<span class=''qspan'' id=''" + verseNo + "''>").html(line.verse + ''<span class="qspan-ayahno">('' + line.surah + '':'' + line.ayah + '')</span>'').appendTo("#surah-wrapper"); }); }); }); } //Play Script & highlight script var audioIndex = 0; var countSpan = 0; countSpan = $(''#surah-wrapper'').children().length; var surahNo = 1; var strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3"; setPlayer(); $(''.customSurah'').change(function() { $(''.play-btn'').css(''display'', ''none''); $aud.pause(); surahNo = $(''#surah option:selected'').val(); setTimeout(function() { countSpan = $(''#surah-wrapper'').children().length; var i = 0; strCat = ''''; for (i = 0; i <= countSpan; i++) { if (i == 0) { strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,"; i += 1 } if (i == countSpan) { if (surahNo == 1) { } else { if (i < 10) { strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,"; } } } else { if (i < 10) { strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,"; } } } if (surahNo == 1) { strCat = null; strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3"; } setPlayer(); $(''.play-btn'').css(''display'', ''block''); }, 3000); }); function setPlayer() { //reset values audioIndex = 0; countSpan = 0; countSpan = $(''#surah-wrapper'').children().length; strCat = strCat.trim(); var audioTracks = strCat; var audioAddress = audioTracks.split('',''); var playing = false; $(function() { $aud = $("#myAudio")[0]; $btn = $(".play-btn"); function setAudio(index) { $("#surah-wrapper > .qspan").removeClass("qplaying"); $aud.preload = ''auto''; $aud.src = audioAddress[index]; } setAudio(audioIndex); $btn.click(function() { if (playing) { playing = false; $aud.pause(); } else $aud.play(); }); $aud.onended = function() { if (audioIndex < audioAddress.length - 1) { audioIndex++; setAudio(audioIndex); $aud.play(); } else { audioIndex = 0; setAudio(audioIndex); playing = false; $btn.text("Play"); } }; $aud.onpause = function() { if (!playing) $btn.text("Play"); $(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png)"); }; $aud.onplay = function() { $btn.text("Pause"); $(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_pause_1-64.png)"); playing = true; $("#surah-wrapper > .qspan:nth-child(" + (audioIndex + 1) + ")").addClass("qplaying"); var wHeight = $(window).height(); var wHalfHeight = wHeight; var x = $(".qplaying").offset(); var curentSpanPosition = x.top; wHalfHeight = wHalfHeight / 2; if (curentSpanPosition > wHalfHeight) { $(''html, body'').animate({ scrollTop: curentSpanPosition - 50 }, 1000); } }; }); }

.play-btn { background-image: url("https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png"); float: none; font-size: 0 !important; height: 50px; margin: 15px auto; padding: 5px 10px; text-align: center; width: 50px; } body{float:right; direction:rtl;} span{padding:5px 10px; direction:rtl; text-align:right; margin:5px 1px; font-size:20px} .qplaying { background: #f00 none repeat scroll 0 0; }

ESTE ES EL SCRIPT REAL que quiero implementar: agradecería la solución en contexto con el script mencionado en el violín.

http://codepen.io/anon/pen/pRKreo

Puede usar Promise.all() , Array.prototype.map() , Audio() constructor, puede canplaythrough evento para cargar todo el audio primero; luego use Array.prototype.reduce() , Promise constructor para reproducir audio en secuencia en el evento ended .

#myAudio { display: none; } span { margin: 0px 10px; } .playing { background: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <button>Play Audio</button> <p> <span>Verse 1</span> <span>Verse 2</span> <span>Verse 3</span> <span>Verse 4</span> <span>Verse 5</span> <span>Verse 6</span> </p>

También puede crear una mezcla de la secuencia de pistas de audio para reproducirlas como una sola pista. Es posible mezclar varios archivos de audio uno encima del otro, preferiblemente con javascript y usar la API de audio Web AudioContext.linearRampToValueAtTime Web, detener el sonido con gracia .