<audio> 的“preload”属性是否影响 window.onload 事件时间？答案

【问题标题】：Does the "preload" attribute of <audio> affect the window.onload event time?<audio> 的“preload”属性是否影响 window.onload 事件时间？
【发布时间】：2016-04-03 12:31:42
【问题描述】：

由于 HTML 的异步特性，我假设（可能不正确？）页面加载的时间线如下：

...等将html加载到DOM中
遇到<audio>标签
预加载指定为“自动”；触发缓冲
继续将 html 加载到 DOM 中...等
触发window.onload事件回调
一段时间后异步：找到音频资源，开始缓冲，或返回服务器错误；触发readystatechange事件回调

而我希望的是，值为“auto”的 preload 属性将延迟 window.onload 事件的触发或延迟标签到 DOM 的处理，直到找到并拥有音频资源开始缓冲，或返回服务器错误并取消加载。

我无法想象为音频资源保留 window.onload，但我看到过去页面处理因 Flash 资源加载或跟踪脚本加载而停止。

TLDR：window.onload 在资源加载方面的确切时间线是什么——特别是音频标签？

【问题讨论】：

您是否尝试在Network 选项卡上查看Timing？ , 将 <audio> src 设置为 data URI ?
我有，但我目前的小型音频文件加载速度太快，我无法解读其中的区别
data URI 会将src 的<audio> 设置为字符串；当 document 的所有文本加载时，onload 会在哪里被调用？
事情是，我希望尽快加载，我只需要知道何时加载
见stackoverflow.com/questions/8059434/…

标签： javascript html audio resources onload

【解决方案1】：

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、onendedAudioContext 事件的替代方法； 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

【讨论】：