ある要素をクリックするとすぐに音がなるようにしたいと思っています。
下記のhtmlとjsで<h1>をクリックすると音がなるようになっているのですが、2回連続でクリックしたとしても2回連続では音が鳴らず、1度クリックした後で少し間隔を開ける必要があります。これをすぐに音がなるようにするにはどうすればいいのでしょうか?
soundapi.jsなどがあるようですが、極力、外部のライブラリなどを使わずにやりたいと思っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ワダエフェ〜ム</title>
<link rel="stylesheet" href="wada.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 id="wadafm">Wada.fm</h1>
<p id="describe">上の「Wada.fm」の文字をクリックすると・・・</p>
<a href="http://wada.fm"><img src="wadafm.png" id="wadafm_artwork"></a>
<a href="wada.mp3" id="se" download="wada.mp3">さあみなさんもワダエフェ〜ム (SE download link)</a>
<a href="https://github.com/kiyugadgeter/wadafm-button/fork" id="forkme">Fork me on Github</a>
<audio src="wada.mp3" id="wadafm_audio" preload="auto" type="audio/mp3"></audio>
<script src="wada.js"></script>
</body>
</html>
var wadafm = document.getElementById("wadafm");
var audio = document.getElementById("wadafm_audio");
wadafm.onclick = function (e) {
console.log("clicked");
audio.play();
}
audio
要素を複数用意して順番に再生すればよいのでは