Question

目前，我将图片链接到带有onClick事件的页面，以便在点击时播放声音。

<div style="display:none;">
    <audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>

<script> function EvalSound(soundobj) 
    { var thissound=document.getElementById(soundobj); thissound.play(); } 
</script>

<a href="PAGE.php" onClick="EvalSound('audio1')"><img src="IMAGE.png"></a>

这样可以正常工作，但声音会因页面加载而中断。假设“SOUND.wav”是10秒长，我将如何编辑我的代码，以便在单击图像时，声音播放时会暂停10秒，然后它会加载页面？

感谢您或您的帮助。

Answer 1

您可以按如下方式更改代码：

<div style="display:none;">
    <audio id="audio1" src="SOUND.wav" controls preload="auto" autobuffer></audio>
</div>

<script> function EvalSound(soundobj) 
    { var thissound=document.getElementById(soundobj); thissound.play(); 
setTimeout( function() { window.location.href = 'PAGE.php'; }, 1000); } // change 1000 to whatever value you would want to wait in milliseconds.
</script>

<a href="#" onClick="EvalSound('audio1')"><img src="IMAGE.png"></a

＆GT;

Answer 2

与我之前的答案相同，只是我建议您使用音频api来确定声音的持续时间并将其设置为超时。

此外，要更改网址，您可以将其添加为参数。

function EvalSoundAndRedirect(soundobj, url) {
    var thissound = document.getElementById(soundobj);
    thissound.play();
    setTimeout(function() {
        window.location.href = url;
    }, thissound.duration);
}

使用：

<a href="#" onClick="EvalSoundAndRedirect('audio1', 'PAGE.php')"><img src="IMAGE.png" /></a>

Javascript - onclick，播放声音，等待x秒，加载URL

2 个答案: