javascript - 如何延迟播放HTML5音频，而忽略加载音频文件的延迟？

Question

我希望HTML5音频示例在页面加载后播放10秒钟，以与页面上的CSS过渡一致。这在本地工作正常，但是在实时环境中加载网页时，加载音频会有1-2秒的延迟，并且似乎下面的JavaScript从加载音频开始(而不是从页面加载开始)花费10秒最初已加载。

请有人建议我如何确保音频在过渡发生的确切时间播放10秒(这是足够的时间来加载音频文件本身)，而不是从加载音频本身起花费10秒？

header 出现在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);
}

Answer 1

试试这个!

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(); 
}