如何在Javascript中预加载声音？

Question

由于该onload功能,我可以轻松预装图像.但它不适用于音频.Chrome,Safari,Firefox等浏览器不支持onload音频标签中的功能.

如何在不使用JS库且不使用或创建HTML标记的情况下在Javascript中预加载声音？

Answer 1

您的问题是Audio对象不支持'load'事件.

相反,有一个名为'canplaythrough'的事件并不意味着它已经完全加载,但是它足够加载到目前的下载速率,它将在音轨有足够的时间播放时完成.

而不是

audio.onload = isAppLoaded;

尝试

audio.oncanplaythrough = isAppLoaded;

或者更好.. ..)

audio.addEventListener('canplaythrough', isAppLoaded, false);

Answer 2

我尝试了tylermwashburn接受的答案,但它在Chrome中无效.所以我继续创建了这个,它从jQuery中获益.它还嗅探ogg和mp3支持.默认是ogg,因为一些专家说192KBS ogg文件和320KBS MP3一样好,所以你节省了40%的所需音频下载.但IE9需要mp3:

// Audio preloader

$(window).ready(function(){
  var audio_preload = 0;
  function launchApp(launch){
    audio_preload++;
    if ( audio_preload == 3 || launch == 1) {  // set 3 to # of your files
      start();  // set this function to your start function
    }
  }
  var support = {};
  function audioSupport() {
    var a = document.createElement('audio');
    var ogg = !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
    if (ogg) return 'ogg';
    var mp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
    if (mp3) return 'mp3';
    else return 0;
  }
  support.audio = audioSupport();
  function loadAudio(url, vol){
    var audio = new Audio();
    audio.src = url;
    audio.preload = "auto";
    audio.volume = vol;
    $(audio).on("loadeddata", launchApp);  // jQuery checking
    return audio;
  }
  if (support.audio === 'ogg') {
    var snd1 = loadAudio("sounds/sound1.ogg", 1);  // ie) the 1 is 100% volume
    var snd2 = loadAudio("sounds/sound2.ogg", 0.3);  // ie) the 0.3 is 30%
    var snd3 = loadAudio("sounds/sound3.ogg", 0.05);
        // add more sounds here
  } else if (support.audio === 'mp3') { 
    var snd1 = loadAudio("sounds/sound1.mp3", 1);
    var snd2 = loadAudio("sounds/sound2.mp3", 0.3);
    var snd3 = loadAudio("sounds/sound3.mp3", 0.05);
        // add more sounds here
  } else {
    launchApp(1);  // launch app without audio
  }

// this is your first function you want to start after audio is preloaded:
  function start(){
     if (support.audio) snd1.play();  // this is how you play sounds
  }

});

此外:这是一个MP3到ogg转换器:http: //audio.online-convert.com/convert-to-ogg 或者您可以使用VLC媒体播放器进行转换.通过右键单击mp3文件(在Windows中)并转到文件详细信息来检查您的mp3比特率.为新的'ogg'文件选择新比特率时,请尽量减少40%.转换器可能会抛出错误,因此请继续增加大小,直到被接受为止.当然测试声音质量令人满意.另外(这适用于我)如果您使用VLC媒体播放器测试音轨,请确保将音量设置为100%或更低,否则您将听到音频质量下降,并可能错误地认为它是压缩的结果.