1

目前，我有一个链接到带有 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 秒，然后加载页面？

谢谢你或你的帮助。

4

2 回答 2

2

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

<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

>

于 2012-12-19T20:52:58.027 回答
1

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

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

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>
于 2012-12-19T21:04:07.180 回答