admin管理员组

文章数量:1340291

I am working on a script where i am playing multiple mp3 and each files is in queue. There is slight delay in playing next .mp3 file as it takes time to buffer/load the file.

How can i buffer the next .mp3 file which is queue so that all file run smoothly without any delay.

 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("/" + 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 = ".mp3,.mp3,.mp3,.mp3,.mp3,.mp3,.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 = ".mp3,";
     i += 1
   }

   if (i == countSpan) {

     if (surahNo == 1) {

     } else {


       if (i < 10) {
         strCat += "" + surahNo + "00" + i + ".mp3,";
       }
      
     }
   } else {
     if (i < 10) {
       strCat += "" + surahNo + "00" + i + ".mp3,";
     }


     
   }
 }
 if (surahNo == 1) {
   strCat = null;
   strCat = ".mp3,.mp3,.mp3,.mp3,.mp3,.mp3,.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(.png)");
 };

 $aud.onplay = function() {
   $btn.text("Pause");
   $(".play-btn").css("background-image", "url(.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(".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;
}
<script src=".1.1/jquery.min.js"></script>
         <audio id="myAudio" >
	        <source src="" type="audio/mpeg">
        </audio>

       
         <div class="play-btn-wrapper">
            <select class="customSurah form-control ddCountry styled-select" id="surah" name="surah" onchange="getData($('#surah option:selected').val())"><option value="1">Al-Faatiha</option><option value="2">Al-Baqara</option><option value="3">Aal-i-Imraan</option><option value="4">An-Nisaa</option><option value="5">Al-Maaida</option><option value="6">Al-An'aam</option><option value="7">Al-A'raaf</option><option value="8">Al-Anfaal</option><option value="9">At-Tawba</option><option value="10">Yunus</option><option value="11">Hud</option><option value="12">Yusuf</option><option value="13">Ar-Ra'd</option><option value="14">Ibrahim</option><option value="15">Al-Hijr</option><option value="16">An-Nahl</option><option value="17">Al-Israa</option><option value="18">Al-Kahf</option><option value="19">Maryam</option><option value="20">Taa-Haa</option><option value="21">Al-Anbiyaa</option><option value="22">Al-Hajj</option><option value="23">Al-Muminoon</option><option value="24">An-Noor</option><option value="25">Al-Furqaan</option><option value="26">Ash-Shu'araa</option><option value="27">An-Naml</option><option value="28">Al-Qasas</option><option value="29">Al-Ankaboot</option><option value="30">Ar-Room</option><option value="31">Luqman</option><option value="32">As-Sajda</option><option value="33">Al-Ahzaab</option><option value="34">Saba</option><option value="35">Faatir</option><option value="36">Yaseen</option><option value="37">As-Saaffaat</option><option value="38">Saad</option><option value="39">Az-Zumar</option><option value="40">Al-Ghaafir</option><option value="41">Fussilat</option><option value="42">Ash-Shura</option><option value="43">Az-Zukhruf</option><option value="44">Ad-Dukhaan</option><option value="45">Al-Jaathiya</option><option value="46">Al-Ahqaf</option><option value="47">Muhammad</option><option value="48">Al-Fath</option><option value="49">Al-Hujuraat</option><option value="50">Qaaf</option><option value="51">Adh-Dhaariyat</option><option value="52">At-Tur</option><option value="53">An-Najm</option><option value="54">Al-Qamar</option><option value="55">Ar-Rahmaan</option><option value="56">Al-Waaqia</option><option value="57">Al-Hadid</option><option value="58">Al-Mujaadila</option><option value="59">Al-Hashr</option><option value="60">Al-Mumtahana</option><option value="61">As-Saff</option><option value="62">Al-Jumu'a</option><option value="63">Al-Munaafiqoon</option><option value="64">At-Taghaabun</option><option value="65">At-Talaaq</option><option value="66">At-Tahrim</option><option value="67">Al-Mulk</option><option value="68">Al-Qalam</option><option value="69">Al-Haaqqa</option><option value="70">Al-Ma'aarij</option><option value="71">Nooh</option><option value="72">Al-Jinn</option><option value="73">Al-Muzzammil</option><option value="74">Al-Muddaththir</option><option value="75">Al-Qiyaama</option><option value="76">Al-Insaan</option><option value="77">Al-Mursalaat</option><option value="78">An-Naba</option><option value="79">An-Naazi'aat</option><option value="80">Abasa</option><option value="81">At-Takwir</option><option value="82">Al-Infitaar</option><option value="83">Al-Mutaffifin</option><option value="84">Al-Inshiqaaq</option><option value="85">Al-Burooj</option><option value="86">At-Taariq</option><option value="87">Al-A'laa</option><option value="88">Al-Ghaashiya</option><option value="89">Al-Fajr</option><option value="90">Al-Balad</option><option value="91">Ash-Shams</option><option value="92">Al-Lail</option><option value="93">Ad-Dhuhaa</option><option value="94">Ash-Sharh</option><option value="95">At-Tin</option><option value="96">Al-Alaq</option><option value="97">Al-Qadr</option><option value="98">Al-Bayyina</option><option value="99">Az-Zalzala</option><option value="100">Al-Aadiyaat</option><option value="101">Al-Qaari'a</option><option value="102">At-Takaathur</option><option value="103">Al-Asr</option><option value="104">Al-Humaza</option><option value="105">Al-Fil</option><option value="106">Quraish</option><option value="107">Al-Maa'un</option><option value="108">Al-Kawthar</option><option value="109">Al-Kaafiroon</option><option value="110">An-Nasr</option><option value="111">Al-Masad</option><option value="112">Al-Ikhlaas</option><option value="113">Al-Falaq</option><option value="114">An-Naas</option></select>
             <div class="play-btn"></div>
        </div>

        <div id="surah-wrapper"></div>

I am working on a script where i am playing multiple mp3 and each files is in queue. There is slight delay in playing next .mp3 file as it takes time to buffer/load the file.

How can i buffer the next .mp3 file which is queue so that all file run smoothly without any delay.

 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./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./verses/Sudais/mp3/001001.mp3,http://download.quranicaudio./verses/Sudais/mp3/001002.mp3,http://download.quranicaudio./verses/Sudais/mp3/001003.mp3,http://download.quranicaudio./verses/Sudais/mp3/001004.mp3,http://download.quranicaudio./verses/Sudais/mp3/001005.mp3,http://download.quranicaudio./verses/Sudais/mp3/001006.mp3,http://download.quranicaudio./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./verses/Sudais/mp3/001001.mp3,";
     i += 1
   }

   if (i == countSpan) {

     if (surahNo == 1) {

     } else {


       if (i < 10) {
         strCat += "http://download.quranicaudio./verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,";
       }
      
     }
   } else {
     if (i < 10) {
       strCat += "http://download.quranicaudio./verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,";
     }


     
   }
 }
 if (surahNo == 1) {
   strCat = null;
   strCat = "http://download.quranicaudio./verses/Sudais/mp3/001001.mp3,http://download.quranicaudio./verses/Sudais/mp3/001002.mp3,http://download.quranicaudio./verses/Sudais/mp3/001003.mp3,http://download.quranicaudio./verses/Sudais/mp3/001004.mp3,http://download.quranicaudio./verses/Sudais/mp3/001005.mp3,http://download.quranicaudio./verses/Sudais/mp3/001006.mp3,http://download.quranicaudio./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./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./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./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;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <audio id="myAudio" >
	        <source src="" type="audio/mpeg">
        </audio>

       
         <div class="play-btn-wrapper">
            <select class="customSurah form-control ddCountry styled-select" id="surah" name="surah" onchange="getData($('#surah option:selected').val())"><option value="1">Al-Faatiha</option><option value="2">Al-Baqara</option><option value="3">Aal-i-Imraan</option><option value="4">An-Nisaa</option><option value="5">Al-Maaida</option><option value="6">Al-An'aam</option><option value="7">Al-A'raaf</option><option value="8">Al-Anfaal</option><option value="9">At-Tawba</option><option value="10">Yunus</option><option value="11">Hud</option><option value="12">Yusuf</option><option value="13">Ar-Ra'd</option><option value="14">Ibrahim</option><option value="15">Al-Hijr</option><option value="16">An-Nahl</option><option value="17">Al-Israa</option><option value="18">Al-Kahf</option><option value="19">Maryam</option><option value="20">Taa-Haa</option><option value="21">Al-Anbiyaa</option><option value="22">Al-Hajj</option><option value="23">Al-Muminoon</option><option value="24">An-Noor</option><option value="25">Al-Furqaan</option><option value="26">Ash-Shu'araa</option><option value="27">An-Naml</option><option value="28">Al-Qasas</option><option value="29">Al-Ankaboot</option><option value="30">Ar-Room</option><option value="31">Luqman</option><option value="32">As-Sajda</option><option value="33">Al-Ahzaab</option><option value="34">Saba</option><option value="35">Faatir</option><option value="36">Yaseen</option><option value="37">As-Saaffaat</option><option value="38">Saad</option><option value="39">Az-Zumar</option><option value="40">Al-Ghaafir</option><option value="41">Fussilat</option><option value="42">Ash-Shura</option><option value="43">Az-Zukhruf</option><option value="44">Ad-Dukhaan</option><option value="45">Al-Jaathiya</option><option value="46">Al-Ahqaf</option><option value="47">Muhammad</option><option value="48">Al-Fath</option><option value="49">Al-Hujuraat</option><option value="50">Qaaf</option><option value="51">Adh-Dhaariyat</option><option value="52">At-Tur</option><option value="53">An-Najm</option><option value="54">Al-Qamar</option><option value="55">Ar-Rahmaan</option><option value="56">Al-Waaqia</option><option value="57">Al-Hadid</option><option value="58">Al-Mujaadila</option><option value="59">Al-Hashr</option><option value="60">Al-Mumtahana</option><option value="61">As-Saff</option><option value="62">Al-Jumu'a</option><option value="63">Al-Munaafiqoon</option><option value="64">At-Taghaabun</option><option value="65">At-Talaaq</option><option value="66">At-Tahrim</option><option value="67">Al-Mulk</option><option value="68">Al-Qalam</option><option value="69">Al-Haaqqa</option><option value="70">Al-Ma'aarij</option><option value="71">Nooh</option><option value="72">Al-Jinn</option><option value="73">Al-Muzzammil</option><option value="74">Al-Muddaththir</option><option value="75">Al-Qiyaama</option><option value="76">Al-Insaan</option><option value="77">Al-Mursalaat</option><option value="78">An-Naba</option><option value="79">An-Naazi'aat</option><option value="80">Abasa</option><option value="81">At-Takwir</option><option value="82">Al-Infitaar</option><option value="83">Al-Mutaffifin</option><option value="84">Al-Inshiqaaq</option><option value="85">Al-Burooj</option><option value="86">At-Taariq</option><option value="87">Al-A'laa</option><option value="88">Al-Ghaashiya</option><option value="89">Al-Fajr</option><option value="90">Al-Balad</option><option value="91">Ash-Shams</option><option value="92">Al-Lail</option><option value="93">Ad-Dhuhaa</option><option value="94">Ash-Sharh</option><option value="95">At-Tin</option><option value="96">Al-Alaq</option><option value="97">Al-Qadr</option><option value="98">Al-Bayyina</option><option value="99">Az-Zalzala</option><option value="100">Al-Aadiyaat</option><option value="101">Al-Qaari'a</option><option value="102">At-Takaathur</option><option value="103">Al-Asr</option><option value="104">Al-Humaza</option><option value="105">Al-Fil</option><option value="106">Quraish</option><option value="107">Al-Maa'un</option><option value="108">Al-Kawthar</option><option value="109">Al-Kaafiroon</option><option value="110">An-Nasr</option><option value="111">Al-Masad</option><option value="112">Al-Ikhlaas</option><option value="113">Al-Falaq</option><option value="114">An-Naas</option></select>
             <div class="play-btn"></div>
        </div>

        <div id="surah-wrapper"></div>

THIS IS THE ACTUAL SCRIPT that i want to implement same: I would appreciate solution in context with script mentioned in the fiddle.

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

  • javascript
  • jquery
Share Improve this question edited Feb 13, 2017 at 8:58 Learning asked Feb 5, 2017 at 7:38 LearningLearning 20k44 gold badges191 silver badges395 bronze badges 2
  • 1 Controlling multiple parameters with ConstantSourceNode and ConstantSourceNode – Ronnie Smith Commented Feb 16, 2017 at 22:13
  • Expanded a possible solution script. You can copy paste demo from here. github./rhroyston/mdl-audio – Ronnie Smith Commented Mar 21, 2017 at 21:29
Add a ment  | 

2 Answers 2

Reset to default 7

Here's you go. The biggest challenge I had was handling the value of this within the handler. Set your <audio> elements to preload="none". My script loads the next song as soon as you play one before it and auto-plays next song once first one finishes.

If you're worried about Global Scope just put it in an IIFE. Enjoy!

var files = document.getElementsByTagName('audio');
var songs = [];
var index = 0;

var Song = function(element) {

this.index = index;
this.playing = function(event) {
	try {
		files[this.index].preload = "auto";
	}
	catch (e) {

	}
};
this.ended = function(event) {
	try {
		files[this.index].play();
	}
	catch (e) {

	}
};
element.addEventListener('playing', this.playing.bind(this), false);
element.addEventListener('ended', this.ended.bind(this), false); // Trick
};

for (var len = files.length, i = 0; i < len; ++i) {
index++;
songs.push(new Song(files[i]));
}
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>

You can use Promise.all(), Array.prototype.map(), Audio() constructor, canplaythrough event to load all audio first; then use Array.prototype.reduce(), Promise constructor to play audio in sequence at ended event.

var audioAddress = [
  "http://download.quranicaudio./verses/Sudais/mp3/003001.mp3",
  "http://download.quranicaudio./verses/Sudais/mp3/003002.mp3",
  "http://download.quranicaudio./verses/Sudais/mp3/003003.mp3",
  "http://download.quranicaudio./verses/Sudais/mp3/003004.mp3",
  "http://download.quranicaudio./verses/Sudais/mp3/003005.mp3",
  "http://download.quranicaudio./verses/Sudais/mp3/003006.mp3"
];

$("button").click(function() {
  Promise.all(audioAddress.map(function(url) {
    return new Promise(function(resolve) {
      var audio = new Audio(url);
      audio.oncanplay = function() {
        resolve(audio);
      }
    })
  }))
  .then(function(data) {
    data.reduce(function(promise, a, index) {
      return promise.then(function() {
        return new Promise(function(resolve) {        
          a.onended = resolve;
          a.play();
          $("p > span").removeClass("playing");
          $("p > span:nth-child(" + (index + 1) + ")")
          .addClass("playing");
        })
      })
    }, Promise.resolve())
  })
});
#myAudio {
  display: none;
}
span {
  margin: 0px 10px;
}
.playing {
  background: yellow;
}
<script src="https://ajax.googleapis./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>

You can also create a mix of the sequence of audio tracks to play as a single track Is it possible to mix multiple audio files on top of each other preferably with javascript and use AudioContext.linearRampToValueAtTime Web audio api, stop sound gracefully.

本文标签： javascriptPreload mp3 file in queue to avoid any delay in playing the next file in queueStack Overflow

版权声明：本文标题：javascript - Preload mp3 file in queue to avoid any delay in playing the next file in queue - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743624745a2512104.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。