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

Question

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

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

Answer 1

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

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

Так что вместо

audio.onload = isAppLoaded;

попробуйте

audio.oncanplaythrough = isAppLoaded;

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

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

Answer 2

Я попробовал принятый ответ от tylermwashburn, и он не работал в Chrome. Так что я перешел и создал это, и это приносит пользу от jQuery. Он также нюхает поддержку ogg и mp3. По умолчанию используется ogg, потому что некоторые эксперты говорят, что файл ogg размером 192 Кбайса так же хорош, как и файл MP3 объемом 320 Кбайт, поэтому вы экономите 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 / преобразовать к OGG Или вы можете использовать VLC Media Player для конвертации. Проверьте битрейт mp3, щелкнув правой кнопкой мыши по файлу mp3 (в Windows) и перейдя к деталям файла. Попробуйте уменьшить на 40% при выборе нового битрейта для нового файла 'ogg'. Преобразователь может выдать ошибку, поэтому продолжайте увеличивать размер до тех пор, пока он не будет принят. Конечно тест звучит на удовлетворительное качество. Также (и это применимо ко мне), если вы используете VLC Media Player для тестирования ваших звуковых дорожек, убедитесь, что вы установили громкость на 100% или ниже, иначе вы услышите ухудшение звука и можете ошибочно думать, что это результат сжатия.

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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