我希望HTML5音频示例在页面加载后10秒播放，以与页面上的CSS转换一致。这在本地工作正常，但是当在实时环境中加载网页时，加载音频时会有1-2秒的延迟，而且下面的JavaScript似乎需要从 audio 开始的10秒钟加载而不是从最初加载页时加载。
请有人建议我如何确保音频播放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);
}
答案 0 :(得分：0)
试试这个！
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();
}
答案 1 :(得分：0)
不幸的是，无法知道 >
等待音频准备播放以开始计时器。如果负载需要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>
或者，而不是维持＆＃34; 10秒＆＃34;在JavaScript和CSS中，你可以完全用JS控制它......见下文：
(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>