预加载队列中的 mp3 文件以避免在播放队列中的下一个文件时出现任何延迟

IT技术 javascript jquery
2021-02-22 11:12:48

我正在编写一个脚本，我正在播放多个 mp3 并且每个文件都在队列中。播放下一个 .mp3 文件会有轻微延迟，因为缓冲/加载文件需要时间。

我如何缓冲下一个排队的 .mp3 文件，以便所有文件顺利运行而没有任何延迟。

 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;
}
<script src="https://ajax.googleapis.com/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>

这是我想要实现的实际脚本：我会很感激在小提琴中提到的脚本的上下文中的解决方案。

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

2个回答

给你。我遇到的最大挑战是处理thishandler 中的值。将您的<audio>元素设置为preload="none". 我的脚本在您播放下一首歌曲时立即加载下一首歌曲，并在第一首歌曲完成后自动播放下一首歌曲。

如果您担心全局范围，只需将其放入 IIFE。享受！

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>

我知道了。好吧，我为你做了最难的部分。该框架为您准备好了。preload一旦歌曲开始，只需创建并附加下一首（或下一首+3）歌曲（就像我修改属性一样）。基本的 XHR 元数据（歌曲名称、网址等）然后.createElement .appendChild就完成了。希望有帮助。
2021-05-01 11:12:48
@Learning “我想要单人游戏”“单人游戏”是什么意思？原始问题没有指定单曲AudioNode应该用于媒体播放。您可以使用MediaSource .appendBuffer()singleAudioNode进行播放，请参阅HTML5 音频流：精确测量延迟？. 尽管您仍然需要在当前播放之前或期间请求所有资源，以避免在浏览器加载媒体时出现延迟。
2021-05-09 11:12:48
我观察到的一个问题是我的解决方案不会在我的手机 (android) 上自动播放。我相信我在某处读到过这是移动设备的默认设置——它们需要用户输入？也许<audio>带有 js 的单标签可以克服这个限制？我得抽时间试试，。
2021-05-10 11:12:48
看来你弄错了，我想要单人播放器，它将播放第一个文件并将下一个文件缓存在队列中，以便没有延迟。在您的情况下，您正在使用三个播放器，这对我来说并不实用，因为我将一个接一个地自动播放 4-200 个 mp3 文件。
2021-05-17 11:12:48
谢谢&我会让你知道的。你有没有设置相同的小提琴。
2021-05-20 11:12:48

您可以使用Promise.all(), Array.prototype.map(),Audio()构造函数,canplaythrough事件首先加载所有音频；然后使用Array.prototype.reduce(),Promise构造函数在ended事件中按顺序播放音频。

var audioAddress = [
  "http://download.quranicaudio.com/verses/Sudais/mp3/003001.mp3",
  "http://download.quranicaudio.com/verses/Sudais/mp3/003002.mp3",
  "http://download.quranicaudio.com/verses/Sudais/mp3/003003.mp3",
  "http://download.quranicaudio.com/verses/Sudais/mp3/003004.mp3",
  "http://download.quranicaudio.com/verses/Sudais/mp3/003005.mp3",
  "http://download.quranicaudio.com/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.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>

您还可以创建音频轨道序列的混合作为单个轨道播放 是否可以最好使用 javascript 将多个音频文件相互混合并使用AudioContext.linearRampToValueAtTime Web 音频 api，优雅地停止声音。

谢谢你，我会尝试实现这一点，看看我是否能做对
2021-05-01 11:12:48
我发现很难实现你的代码。这是我的最终脚本，你能在这个脚本中实现相同的代码吗？ codepen.io/anon/pen/pRKreo
2021-05-05 11:12:48
您可以一次加载N多个文件，例如 6。当index达到 时N -1，加载N将安排在媒体文件N播放完成时播放的附加文件。或者，用于WebWorker请求所有文件，然后在当前媒体播放完成时将文件传输到主线程。
2021-05-09 11:12:48
如果我们的文件数量很少，这将正常工作，为大多数古兰经章节下载 100-200 个文件会很慢。例如古兰经的这一章有 200 节经文，我将有 200 个文件。这会变慢，因为下载所有文件需要时间。我只想预加载接下来的 2 或 3 个文件，这样它会很快，而不是下载所有文件。如果我没有弄错你的概念
2021-05-12 11:12:48
@Learning 您可以return Promise.all()在一个函数中放置 和，return data.reduce(), 链.then()再次调用相同的函数，直到播放完所有 100-200 个文件。
2021-05-15 11:12:48
其它你可能感兴趣的问题
上一篇Angular 2 - 链接 http 请求 下一篇使用javascript自动增加firebase中的值