首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Javascript中预载声音?

如何在Javascript中预载声音?
EN

Stack Overflow用户
提问于 2011-03-15 23:02:16
回答 5查看 58.5K关注 0票数 54

多亏了onload函数,我可以很容易地预加载图像。但它不适用于音频。浏览器,如Chrome,Safari,Firefox等不支持音频标签中的onload函数。

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-03-22 00:48:22

你的问题是Audio对象不支持“load”事件。

取而代之的是,有一个叫做'canplaythrough‘的事件,这并不意味着它是完全加载的,但它加载了足够的内容,按照当前的下载速度,它会在曲目有足够的时间播放完的时候结束。

因此,不是

代码语言:javascript
复制
audio.onload = isAppLoaded;

试一试

代码语言:javascript
复制
audio.oncanplaythrough = isAppLoaded;

或者更好的是..;)

代码语言:javascript
复制
audio.addEventListener('canplaythrough', isAppLoaded, false);
票数 48
EN

Stack Overflow用户

发布于 2012-10-29 14:23:48

我尝试了tylermwashburn公认的答案,它在Chrome上不起作用。所以我继续往前走,创建了这个,它受益于jQuery。它还嗅探ogg和mp3的支持。默认是ogg,因为一些专家说192KBS的ogg文件和320KBS的MP3一样好,所以你可以节省40%的所需音频下载。但是,IE9需要mp3:

代码语言:javascript
复制
// 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 player来转换。通过右键单击mp3文件(在Windows中)并转到文件详细信息,检查您的mp3比特率。尝试减少40%,当选择您的新的比特率为您的新'ogg‘文件。转换器可能会抛出错误,因此不断增加大小,直到被接受为止。当然,测试声音以获得令人满意的质量。另外(这也适用于我),如果你正在使用VLC媒体播放器测试你的音轨,请确保你的音量设置为100%或更低,否则你会听到音频质量下降,并可能错误地认为这是压缩的结果。

票数 10
EN

Stack Overflow用户

发布于 2011-03-15 23:23:05

根据您的目标浏览器,在audio标记上设置prelaod属性可能就足够了。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5313646

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档