如何在 Javascript 中预加载声音？

Question

借助 onload 函数，我可以轻松预加载图像。但它不适用于音频。 Chrome、Safari、Firefox 等浏览器不支持音频标签中的 onload 函数。

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

Answer 1

您的问题是音频对象不支持“加载”事件。

相反，有一个名为“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% 或更低，否则您会听到音频质量下降的声音，并且可能会错误地认为这是压缩的结果。

Answer 3

//Tested on Chrome, FF, IE6

function LoadSound(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("load-sound").innerHTML = '<embed src="' + filename + '" controller="1" autoplay="0" autostart="0" />';
        }
    }
    xmlhttp.open("GET", filename, true);
    xmlhttp.send();
}

参考

• http://sharkysoft.com/tutorials/jsa/content/048.html
• ​​jQuery：如何预加载声音？
• http://jsarchive.8m.com/Main/audio.html

Answer 4

根据您的目标浏览器，设置 audio 标记上的“WC3 HTML5 规范”>prelaod 属性可能就足够了。

Answer 5

Remy 提出了一个利用 sprite 概念的 iOS 解决方案：

http://remysharp。 com/2010/12/23/audio-sprites/

不确定它是否直接解决预加载问题，但其优点是您只需要加载一个音频文件（我想这也是一个缺点）。

Answer 6

您是否尝试对文件发出 ajax 请求？在它完全加载之前，您不会显示/使用它。

例如jQuery：如何预加载声音？（你不会不必使用 jQuery）。