正确的onload为＆LT;音频＆GT; [英] Proper onload for <audio>

问题描述

我一直环顾四周，我开始担心，这是不可能的。结果
有没有什么办法让一个标准的＆LT;音频＆gt;在回退标记...

I've been looking around and I'm starting to worry that this isn't possible.
Is there any way to make a standard <audio> tag with fallbacks...

<audio>
    <source src='song.ogg' type='audio/ogg'></source>
    <source src='song.mp3' type='audio/mp3'></source>
</audio>

...有一个onload事件。我环顾四周，所有我能找到一些黑客可能会或可能无法正常工作（他们不为我在Chrome）和 canplaythrough 事件。结果
我想这个的原因是因为我在做有大量的音频片段在某些点发挥了presentation。我不想presentation开始，直到所有的音频被加载（否则事情会变得不同步）。我想剪辑在同一时间内加载1，这样我可以创造一种负载吧。我真的不想诉诸使用Flash声音，因为这是应该表现出纯粹的网络技术。搜索结果
所以基本上我得要加载通过音频文件的阵列周期这个 loadAudio 函数 audioQueue 。 loadAudio 被调用一次，然后直到所有文件都加载它调用自身。
问题是我还没有找到正确的事件来触发加载下一个文件。

...have an onload event. I've looked around and all I could find are some hacks that may or may not work (they don't for me on Chrome) and the canplaythrough event.
The reason I want this is because I am making a presentation that has lots of audio clips to play at certain points. I don't want the presentation to start until all of the audio is loaded (otherwise things could get out of sync). I want the clips to be loaded 1 at a time so that I can create a sort of loading bar. I really don't want to resort to using Flash sound because this is supposed to demonstrate pure web technologies.

So basically I've got this one loadAudio function that cycles through the array of audio files to be loaded audioQueue. loadAudio is called once and then it calls itself until all the files are loaded. Problem is I haven't found the correct event to trigger loading the next file.

loadAudio = function(index)
{
mer = audioQueue[index];
var ob = "<audio id='" + mer + "'><source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'></source><source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'></source></audio>";
$("#audios").append(ob);
$("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded"); 
     if (index + 1 < audioQueue) { loadAudio(index + 1); } }, false);
}

所以。任何机会了适当的音频onload事件？我基本上愿意，只要做任何事情，因为它仍然是所有HTML和Javascript。

So. Any chance for a proper audio onload? I'm basically willing to do anything as long as it's still all HTML and Javascript.

推荐答案

您可以使用 loadeddata - 的MediaEvent 。例如，你可以将所有的音频文件的数组，做类似：

You can use the loadeddata-MediaEvent. For example you can put all of your audio files in an Array and do something like:

var files = ['a.mp3','b.mp3'];

$.each(files,function(){
   var tmp = new Audio();
   tmp.src = this;
   tmp.on('loadeddata',function(){
   var i = files.indexOf(this);
      files.splice(i,1);
      if (!files.length){
         alert('Preloading done!');
      }
   });
});

修改：这个就有点更先进的方法为2016：

EDIT: this would a little more modern approach as of 2016:

var files = ['a.mp3','b.mp3'];

Promise
  .all(files.map(function(){
    return new Promise(function(resolve){
      var tmp = new Audio();
      tmp.src = this;
      tmp.on('loadeddata', resolve);
    });
  })).then(function(){
    alert('Preloading done!');
  }));

这篇关于正确的onload为＆LT;音频＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！