如何延迟播放HTML5音频，但忽略加载音频文件的延迟
How do I delay playing of HTML5 audio, but ignore the delay from loading the audio file?
我希望在页面加载后10秒播放HTML5音频样本，以与页面上的CSS转换相一致。这在本地运行良好，但当在实时环境中加载网页时，加载音频时会有1-2秒的延迟，并且下面的JavaScript似乎从加载音频开始需要10秒，而不是从最初加载page时开始。
请有人建议我如何确保音频在转换发生的确切时间播放10秒（这是加载音频文件本身的充足时间），而不是从音频本身加载开始的10秒？
10秒后出现的标题：
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 10s;
-moz-animation: logo 5s ease-out 10s;
-ms-animation: logo 5s ease-out 10s;
-o-animation: logo 5s ease-out 10s;
animation: logo 5s ease-out 10s;
}
音频的HTML：
<audio id="theme" preload="auto" controls>
<source src="audio/sound.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
JavaScript：
function playtheme() {
document.getElementById('theme').play();
}
function playaudio() {
setTimeout("playtheme()", 10000);
}
试试这个！
window.onload = function() { // when the page loads
setTimeout(play, 10000); // set a 10 second timeout to call play()
}
play = function() { // play the audio
document.getElementById("theme").play();
}
不幸的是，无法知道加载需要多长时间，因此在知道加载之前启动动画可能与音频开头一致，也可能与音频开始不一致。
- 如果最重要的是动画与音频开始对齐，则需要等待加载音频以开始计时器和动画。下面，我演示了这一点
- 如果最重要的是动画在10秒内发生，则应在页面加载时启动动画，并在加载完成后播放音频
这将等待，直到音频准备好播放，然后开始计时。如果加载需要15秒，则从页面加载开始音频将需要25秒。
(function() {
// BEGIN: For debugging
var counter = 0;
var timer = setInterval(function() {
counter += 1
document.getElementById('debugcounter').innerHTML = counter;
}, 1000);
// END: For debugging
document.getElementById('theme').oncanplay = function() {
// BEGIN: For debugging
document.getElementById('loaded').innerHTML = "Yes";
// END: For debugging
// Create and append the h1 now, once it's able to play
// This element has a animation delay of 10 seconds, so it will line up with the audio playing
var h1Ele = document.createElement('h1');
h1Ele.appendChild(document.createTextNode("This is the H1 whose animation is complete once the audio plays"));
document.getElementsByTagName("body")[0].appendChild(h1Ele);
var audioEle = this;
// Play after 10 seconds
setTimeout(function() {
audioEle.play();
// BEGIN: For debugging
clearInterval(timer);
// END: For debugging
}, 10000); // 10 seconds
};
})();/* BEGIN: For debugging */
.debuginfo {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 0, 0, .5);
padding: 20px;
border-radius: 5px;
}
.debuginfo p {
margin: 0;
}
/* END: For debugging */
@-webkit-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
h1 {
opacity: 0;
/*
animation-name: logo;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 10s;
animation-fill-mode: forwards;
*/
-webkit-animation: logo 5s ease-out 10s forwards;
-moz-animation: logo 5s ease-out 10s forwards;
-ms-animation: logo 5s ease-out 10s forwards;
-o-animation: logo 5s ease-out 10s forwards;
animation: logo 5s ease-out 10s forwards;
}<div class="debuginfo">
<p>Loaded? <span id="loaded">No</span></p>
<p>Time since page load: <span id="debugcounter"></span></p>
</div>
<audio id="theme" preload="auto" controls>
<!-- Using deelay.me for debugging purposes. This will delay the load for 15 seconds -->
<source src="http://deelay.me/15000/http://www.noiseaddicts.com/samples_1w72b820/2534.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>或者，您可以完全在JS中控制它，而不是在JavaScript和CSS中都保持"10秒"。。。见下文：
(function() {
// BEGIN: For debugging
var counter = 0;
var timer = setInterval(function() {
counter += 1
document.getElementById('debugcounter').innerHTML = counter;
}, 1000);
// END: For debugging
document.getElementById('theme').oncanplay = function() {
var audioEle = this;
// BEGIN: For debugging
document.getElementById('loaded').innerHTML = "Yes";
// END: For debugging
// Play after 10 seconds
setTimeout(function() {
audioEle.play();
document.getElementsByTagName('h1')[0].className = "audio-started";
// BEGIN: For debugging
clearInterval(timer);
// END: For debugging
}, 10000); // 10 seconds
};
})();/* BEGIN: For debugging */
.debuginfo {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 0, 0, .5);
padding: 20px;
border-radius: 5px;
}
.debuginfo p {
margin: 0;
}
/* END: For debugging */
@-webkit-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes logo {
0% { opacity: 0; }
100% { opacity: 1; }
}
h1 {
opacity: 0;
}
h1.audio-started {
/*
animation-name: logo;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 10s;
animation-fill-mode: forwards;
*/
-webkit-animation: logo 5s ease-out 0s forwards;
-moz-animation: logo 5s ease-out 0s forwards;
-ms-animation: logo 5s ease-out 0s forwards;
-o-animation: logo 5s ease-out 0s forwards;
animation: logo 5s ease-out 0s forwards;
}<div class="debuginfo">
<p>Loaded? <span id="loaded">No</span></p>
<p>Time since page load: <span id="debugcounter"></span></p>
</div>
<audio id="theme" preload="auto" controls>
<!-- Using deelay.me for debugging purposes. This will delay the load for 15 seconds -->
<source src="http://deelay.me/15000/http://www.noiseaddicts.com/samples_1w72b820/2534.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h1>Audio Began</h1>相关文章：
- 如何播放部分音频文件
- 音频控件在mouseover上显示，在mouseout上淡出
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 可以简化嵌套的延迟Q Promises解析吗
- onclick函数需要双击，因为类分配延迟
- 是否可以在浏览器中使用纯JavaScript保存音频流
- 更多延迟动画
- angular不会更改json的音频源
- 延迟后播放音频标签
- 移动设备上的 HTML 5 音频 .play(） 延迟
- 在 iPad 上延迟后正在播放音频
- 单击时播放音频时出现不必要的延迟
- 在移动浏览器上播放 HTML5 音频文件时出现延迟
- 网络音频 API 延迟与反馈崩溃的铬
- 寻找HTML5音频元素会导致延迟(中断同步）
- 如何延迟播放HTML5音频，但忽略加载音频文件的延迟
- HTML5 音频流:精确测量延迟
- 低延迟音频播放
- 如何设置 HTML5 视频的音频延迟(取消同步）
- Web:如何一个接一个播放音频文件而不延迟
