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

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

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

Поэтому вместо

audio.onload = isAppLoaded;

попробуйте

audio.oncanplaythrough = isAppLoaded;

Или, что еще лучше.. 😉

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

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

Вот код, который я использовал:

// Предзагрузчик аудио

$(window).ready(function(){
  var audio_preload = 0;
  function launchApp(launch){
    audio_preload++;
    if ( audio_preload == 3 || launch == 1) {  // установите 3 на количество ваших файлов
      start();  // укажите эту функцию как вашу стартовую функцию
    }
  }
  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
    return audio;
  }
  if (support.audio === 'ogg') {
    var snd1 = loadAudio("sounds/sound1.ogg", 1);  // например, 1 - 100% громкость
    var snd2 = loadAudio("sounds/sound2.ogg", 0.3);  // 0.3 - 30%
    var snd3 = loadAudio("sounds/sound3.ogg", 0.05);
        // добавьте больше звуков здесь
  } 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);
        // добавьте больше звуков здесь
  } else {
    launchApp(1);  // запускаем приложение без звука
  }

// это ваша первая функция, которую вы хотите запустить после предзагрузки аудио:
  function start(){
     if (support.audio) snd1.play();  // так вы воспроизводите звуки
  }

});

Кроме того: Вот ссылка на конвертер mp3 в ogg: http://audio.online-convert.com/convert-to-ogg Или вы можете использовать VLC Media Player для конвертации. Проверьте битрейт вашего mp3 файла, кликнув правой кнопкой мыши по файлу (в Windows) и выбрав свойства. Попробуйте уменьшить его на 40% при выборе нового битрейта для вашего файла ogg. Конвертер может выдавать ошибку, поэтому увеличивайте размер файла, пока он не будет принят. Обязательно тестируйте звуки на предмет удовлетворительного качества. Также (это касалось и меня) если вы используете VLC Media Player для проверки ваших аудиотреков, убедитесь, что громкость установлена на 100% или ниже, иначе вы услышите искажение звука и можете ошибочно подумать, что это результат сжатия.

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

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

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