由于该onload功能，我可以轻松预加载图像。但它不适用于音频。Chrome、Safari、Firefox 等浏览器不支持onload音频标签中的功能。
如何在不使用 JS 库和不使用或创建 HTML 标签的情况下在 Javascript 中预加载声音？
如何在 Javascript 中预加载声音？
IT技术
javascript
audio
preload
2021-03-06 05:46:09
6个回答
您的问题是 Audio 对象不支持 'load' 事件。
相反，有一个名为“canplaythrough”的事件并不意味着它已完全加载，但已加载了足够多的事件，以当前的下载速率，它将在曲目有足够的时间播放时完成。
所以代替
audio.onload = isAppLoaded;
尝试
audio.oncanplaythrough = isAppLoaded;
或者更好.. ;)
audio.addEventListener('canplaythrough', isAppLoaded, false);
我尝试了 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% 或更低，否则您会听到音频质量下降的声音，并且可能会错误地认为这是压缩的结果。
根据您的目标浏览器，prelaod在audio标签上设置属性可能就足够了。
Remy 为 iOS 提出了一个利用 sprite 概念的解决方案：
http://remysharp.com/2010/12/23/audio-sprites/
不确定它是否直接解决了预加载问题，但它的优点是您只需要加载一个音频文件（我想这也是一个缺点）。
您是否尝试对文件发出 ajax 请求？在它完全加载之前，您不会显示/使用它。
例如jQuery：你如何预加载声音？（您不必使用 jQuery）。