由于 HTML 的异步特性，我假设(可能不正确？)页面加载的时间线如下:
- ... 等将 html 加载到 DOM 中
- 遇到
<audio>标签 - 预加载指定为“自动”；触发缓冲
- 继续将 html 加载到 DOM...等
- 火灾
window.onload事件回调 - 一段时间后异步:找到音频资源，开始缓冲，或返回服务器错误；火灾
readystatechange事件回调
而我希望的是 preload值为“auto”的属性将延迟 window.onload从触发或延迟标记到 DOM 处理的事件，直到找到音频资源并开始缓冲，或者返回服务器错误并取消加载。
我无法想象扣留window.onload用于音频资源，但后来我看到页面处理在过去加载 flash 资源或跟踪脚本时停止。
TLDR:window.onload 的确切时间表是什么？关于资源加载——特别是音频标签？
最佳答案
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 的替代方法，AudioContext 的 onended 事件； 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
关于javascript - <audio>的 "preload"属性是否影响window.onload事件时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36380408/