Play audio when clicking on button and redirect after sound is done playing

问题

I made I simple site with four buttons. If I click one I want it to play a sound and when the sound is done playing (or after 'X' amount of seconds) I want it to redirect.

This is my code so far. I have no idea on how to put in the sound and the delay.

<html>
<head>

<link rel="stylesheet" type="text/css" href="/level1/style.css">



</head>

<body>



<img STYLE= "top: 20px; Left: 200px; height:900px; width: 800px position:      absolute;" src="\images\border.jpg">
<img STYLE= "position: absolute; top: 50px; Left: 50px; height:120px; width:  120px;" src="\images\level1.jpg">

<a href="#"><img src="\images\1a1.jpg" onmouseover="this.src='/images/1a1g.jpg'"
onmouseout="this.src='/images/1a1.jpg'"  id="a1"> </a>
<a href="\level1\index.html"><img src="\images\1a2.jpg" onmouseover="this.src='/images/1a2g.jpg'"
onmouseout="this.src='/images/1a2.jpg'" " id="a2"> </a>
<a href="\level1\index.html"><img src="\images\1a3.jpg"   onmouseover="this.src='/images/1a3g.jpg'"
onmouseout="this.src='/images/1a3.jpg'"  id="a3"> </a>
<a href="\level1\index.html"><img src="\images\1a4.jpg" onmouseover="this.src='/images/1a4g.jpg'"
onmouseout="this.src='/images/1a4.jpg'"  id="a4"> </a>






</body>

</html>

回答1:

You need to embed a HTML Audio Element:http://www.w3schools.com/tags/ref_av_dom.asp

With the method play() in the eventlistener, as described on this page you can start the audio, when Audio playing has ended: http://www.w3schools.com/tags/av_event_ended.asp You can set a Timeout with

`var seconds= 3;
setTimeout(
        function(){
              /*  This code will be executed, after the defined Delay  */
              }
 seconds * 1000);`

来源：https://stackoverflow.com/questions/35638360/play-audio-when-clicking-on-button-and-redirect-after-sound-is-done-playing

标签

javascript

html

button

delay