Атрибут «preload» <audio> влияет на время события window.onload?

я предположил, что (возможно, неправильно?), Из-за асинхронной природы HTML, что временная шкала загрузки страницы выглядит следующим образом:Атрибут «preload» <audio> влияет на время события window.onload?

... и т.д. Загрузка HTML в DOM
наталкиваются <audio> тег
preload указан как «авто»; триггер буферные
продолжить загрузку HTML в DOM ... и т.д.
огонь window.onload обратные вызовы событий
асинхронно через некоторое время: аудио ресурс найден, начать буферизацию, или возвращается ошибка сервера; огнь readystatechange обратных вызовов событий

Принимая во внимании то, что я надеюсь на то, что атрибут preload со значением «авто» задержит window.onload события от обработки обжига или задержки тегов к-DOM, пока аудио ресурс не найден и начал буферизацию, или возвращается ошибка сервера, и загрузка отменена.

Я не могу себе представить, отказывая window.onload для аудио ресурса, но затем я есть видел обработка страницы застопорился для загрузки флэш-ресурса или отслеживания загрузки сценария в прошлом.

TLDR: Какова конкретная временная шкала window.onload в отношении загрузки ресурсов - в частности, звуковой тег?

источник

2016-04-03 Dexter

Вы пробовали обзор '' Timing' на вкладке Network'? , установив '

У меня есть, но мое текущее небольшое вооружение аудиофайлов загружается так быстро, что я не могу расшифровать разницу – Dexter

'data URI' установил' src' '

window.onload Событие, как представляется, вызывается перед носителем src полностью загружено. Использование подходов, описанных в How do you check if a HTML5 audio element is loaded?; и в том числе .webkitAudioDecodedByteCount

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    window.addEventListener("load", function() { 
     var media = document.querySelector("audio"); 
     console.log("window onload event" 
       , media.webkitAudioDecodedByteCount 
       , media.readyState) 
    }) 

    function myOnCanPlayFunction() { 
     console.log("Can play", event.target.webkitAudioDecodedByteCount 
          , event.target.seekable.start(0) 
          , event.target.seekable.end(0)); 
    } 

    function myOnCanPlayThroughFunction() { 
     console.log("Can play through", event.target.webkitAudioDecodedByteCount 
       , event.target.seekable.start(0) 
       , event.target.seekable.end(0)); 
    } 

    function myOnLoadedData() { 
     console.log("Loaded data", event.target.webkitAudioDecodedByteCount 
       , event.target.seekable.start(0) 
       , event.target.seekable.end(0)); 
    } 
    </script> 
</head>  
<body>  
    <audio oncanplay="myOnCanPlayFunction()" 
     oncanplaythrough="myOnCanPlayThroughFunction()"    
     onloadeddata="myOnLoadedData()" 
     src="/path/to/audio/file" 
     preload autoplay buffered controls></audio> 
</body> 
</html>

plnkr версия 1 http://plnkr.co/edit/zIIDDLZeVU7NHdfAtFka?p=preview

Альтернативный подход с использованием XMLHttpRequest, onended событие AudioContext; Promise; рекурсия для запроса, последовательно воспроизводите массив файлов. См AudioContext.decodeAudioData()

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script> 
    var sources = ["/path/to/audio/src/1" 
    , "/path/to/audio/src/2"]; 
    var src = sources.slice(0); // copy original array 

    function getAudio(url) { 
     return new Promise(function(resolve, reject) { 
     var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); 
     var source = audioCtx.createBufferSource(); 
     var request = new XMLHttpRequest(); 
     request.open("GET", url, true); 
     request.responseType = "arraybuffer"; 
     request.onload = function() { 
     var audioData = request.response; 
     audioCtx.decodeAudioData(audioData).then(function(decodedData) { 
      source.buffer = decodedData; 
      source.connect(audioCtx.destination); 
      console.log(source, decodedData); 
      // do stuff when current audio has ended 
      source.onended = function() { 
      console.log("onended:", url); 
      if (src.length) 
       resolve(src) 
      else resolve("complete") 
      } 
      source.start(0); 
     }); 
     } 
     request.send(); 
     }) 
    } 
    var audio = (function tracks(s) { 
    return getAudio(s.shift()) 
    .then(function(data) { 
     if (Array.isArray(data) && data.length) return tracks(data) 
     else return data 
    }) 
    }(src)); 
    // do stuff when all `src` have been requested, played, ended 
    audio.then(function(msg) { 
     console.log(msg) 
    }) 
    </script> 
</head> 
<body> 
</body> 
</html>

plnkr версия 2 http://plnkr.co/edit/zIIDDLZeVU7NHdfAtFka?p=preview

источник

2016-04-03 04:31:42 guest271314

Атрибут «preload» <audio> влияет на время события window.onload?

ответ

Смежные вопросы