文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在队列中预加载mp3文件，避免在播放队列中的下一个文件时出现任何延迟

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

Stack Overflow用户
提问于 2017-02-05 15:38:56
回答 2查看 2.6K关注 0票数 16

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

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

​

代码语言：javascript
复制
 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);
   }

 };
   });

 }
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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

javascript
jquery
EN

回答 2

Stack Overflow用户

发布于 2017-02-13 08:23:05

这是给你的。我遇到的最大挑战是handling the value of this within the handler。将<audio>元素设置为preload="none"。我的脚本会在你播放前一首歌时加载下一首歌，并在第一首歌结束后自动播放下一首歌。

如果你担心全球范围，就把它放到生活中去吧。享受吧！

​

代码语言：javascript
复制
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]));
}
代码语言：javascript
复制
ul{
  list-style: none;
}
代码语言：javascript
复制
<!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>

​

票数 7
EN

Stack Overflow用户

发布于 2017-02-05 16:18:55

可以先使用Promise.all()、Array.prototype.map()、Audio()构造函数、canplaythrough event加载所有音频，然后在ended事件中使用Array.prototype.reduce()、Promise构造函数依次播放音频。

​

代码语言：javascript
复制
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())
  })
});
代码语言：javascript
复制
#myAudio {
  display: none;
}
span {
  margin: 0px 10px;
}
.playing {
  background: yellow;
}
代码语言：javascript
复制
<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>

​

您还可以创建音频轨道序列的混合以作为单个轨道Is it possible to mix multiple audio files on top of each other preferably with javascript播放，并使用AudioContext.linearRampToValueAtTime Web audio api, stop sound gracefully。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42049639

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档