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

Я могу легко загружать изображения благодаря . Но это не работает со звуком. Браузеры, такие как хром, сафари, Firefox, и т. д. не поддерживайте onload функции в тег audio.

Как предварительно загрузить звук в Javascript без использования библиотек JS и без использования или создания HTML-тегов?

48
audio javascript preload

6 ответов

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

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

Так вместо

audio.onload = isAppLoaded;

попробовать

audio.oncanplaythrough = isAppLoaded;

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

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

я попробовал принятый ответ tylermwashburn, и он не работал в Chrome. Поэтому я пошел дальше и создал это с помощью jQuery. Он также нюхает для поддержки ogg и mp3. По умолчанию ogg, потому что некоторые эксперты говорят, что 192kbs ogg файл так же хорошо, как 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
  }

});

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

10

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

0

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

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

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

0

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

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

0
//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();
}

ссылка

0