如何在Javascript中预加载声音？
由于onloadfunction，我可以轻松预加载图像。 但它不适用于audio。 像Chrome，Safari，Firefox等浏览器不支持audio标签中的onloadfunction。
如何在Javascript中预加载声音而不使用JS库，也不使用或创buildHTML标签？
你的问题是，audio对象不支持“加载”事件。
相反，有一个名为“canplaythrough”的事件，并不意味着它已经完全加载，但是按照当前的下载速率加载足够的事件，在轨道有足够的时间播放时就会结束。
所以，而不是
audio.onload = isAppLoaded;
尝试
audio.oncanplaythrough = isAppLoaded;
或者更好呢..;）
audio.addEventListener('canplaythrough', isAppLoaded, false);
我尝试了由tylermwashburn接受的答案，并没有在Chrome中工作。 所以我转而创build了这个，它从jQuery中受益匪浅。 它也嗅探ogg和mp3的支持。 默认是ogg，因为有些专家说192KBS的ogg文件和320KBS的MP3一样好，所以你节省了40％的audio下载。 但是，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比特率右键单击MP3文件（在Windows中），并转到文件的详细信息。 为新的“ogg”文件select新的比特率时，尝试减less40％。 转换器可能会抛出一个错误，所以继续增加大小，直到被接受。 当然testing听起来令人满意的质量。 另外（这适用于我），如果你使用VLC媒体播放器来testing你的音轨，确保你设置在100％或以下的音量，否则你会听到audio退化，并可能错误地认为这是压缩的结果。
根据目标浏览器的不同，在audio标签上设置prelaod属性可能就足够了。
雷米想出了一个利用精灵概念的iOS解决scheme：
http://remysharp.com/2010/12/23/audio-sprites/
不知道它直接解决预加载问题，但是有一个好处，就是你只需要加载一个audio文件（这也是一个缺点，我想）。
你有没有试过对这个文件做一个ajax请求？ 在完全加载之前，您不会显示/使用它。
例如jQuery：你如何预加载声音？ （你不必使用jQuery）。
//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(); }
参考
