Как предварительно загрузить звук в Javascript?

Ответ 1

Ваша проблема в том, что объекты Audio не поддерживают событие load.

Вместо этого есть событие, называемое "canplaythrough", которое не означает, что оно полностью загружено, но достаточно его загружено, что при текущей скорости загрузки оно будет завершено к тому времени, когда у трека было достаточно времени для воспроизведения.

Итак, вместо

audio.onload = isAppLoaded;

попробовать

audio.oncanplaythrough = isAppLoaded;

Или еще лучше..;)

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

Ответ 2

Я попробовал принятый ответ tylermwashburn, и он не работал в Chrome. Поэтому я перешел и создал это, и это принесло пользу jQuery. Он также нюхает за поддержку ogg и mp3. Значение по умолчанию - ogg, потому что некоторые эксперты говорят, что файл ogg 192KBS так же хорош, как 320KBS MP3, поэтому вы сохраняете 40% от требуемой загрузки аудио. Однако mp3 требуется для IE9:

// 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 Media для преобразования. Проверьте свой битрейт mp3, щелкнув правой кнопкой мыши на mp3 файле (в Windows) и перейдя к файлам. Попытайтесь уменьшить на 40% при выборе нового битрейта для нового файла ogg. Конвертер может выдавать ошибку, поэтому продолжайте увеличивать размер до тех пор, пока не будет принято. Конечно, тестовые звуки удовлетворительного качества. Также (и это применимо ко мне), если вы используете проигрыватель VLC Media для проверки ваших аудиодорожек, убедитесь, что вы установили громкость на 100% или ниже, иначе вы услышите ухудшение звука и можете ошибочно считать, что это результат сжатия.

Ответ 3

В зависимости от ваших целевых браузеров может быть достаточно установить атрибут prelaod в теге audio.

Ответ 4

//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

Ответ 5

Реми придумали решение для iOS, которое использует концепцию спрайтов:

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

Не уверен, что он напрямую обращается к предварительной загрузке, но имеет то преимущество, что вам нужно только загрузить один аудиофайл (что также является недостатком, я полагаю).

Ответ 6

Вы пытались сделать запрос ajax для файла? Вы бы не показывали/не использовали его, пока он не был полностью загружен.

например. jQuery: как вы загружаете звук? (вам не нужно будет использовать jQuery).