要素を連続してクリックしても音がなるようにする


ある要素をクリックするとすぐに音がなるようにしたいと思っています。  
下記のhtmlとjsで<h1>をクリックすると音がなるようになっているのですが、2回連続でクリックしたとしても2回連続では音が鳴らず、1度クリックした後で少し間隔を開ける必要があります。これをすぐに音がなるようにするにはどうすればいいのでしょうか?  
soundapi.jsなどがあるようですが、極力、外部のライブラリなどを使わずにやりたいと思っています。

[code]

    
    <!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>
    
    
[/code]

[code]

    
    var wadafm = document.getElementById("wadafm");
    var audio = document.getElementById("wadafm_audio");
    wadafm.onclick = function (e) {
        console.log("clicked");
        audio.play();
    }
    
    
[/code]




Audio要素は簡単に音声を再生する分には問題ありませんが、  
短い間隔の再生や和音などを行おうとすると上手くいかないことが多いです。

Audio要素を使うのであれば、  
再生が終わるまでボタンを無効にしておくような実装が好ましいかと思います。

もしもより高度な音声再生を行いたいのであれば、  
[Web Audio API](http://www.w3.org/TR/webaudio/)をご利用ください。

以下のコードは、  
Google Chromeで動作確認したものになります。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>音声再生のテスト</title>
        <script>//<![CDATA[
            var context = null;
            var dogBarkingBuffer = null;
    
            function init()
            {
                try {
                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
                    context = new AudioContext();
                }
                catch(e) {
                    context = null;
                    alert("このブラウザではWeb Audio APIがサポートされていません。");
                }
            }
    
            function load(url)
            {
                if (!context) { return; }
                var request = new XMLHttpRequest();
                request.open('GET', url, true);
                request.responseType = 'arraybuffer';
                request.onload = function() {
                    context.decodeAudioData(
                        request.response,
                        function(buffer) {
                            dogBarkingBuffer = buffer;
                            document.getElementById("play").disabled = false;
                        },
                        function()
                        {
                            alert("音声ファイルの読み込みに失敗しました。");
                        });
                }
                request.send();
            }
    
            function playAudio()
            {
                if (!dogBarkingBuffer) { return; }
                var source = context.createBufferSource();
                source.buffer = dogBarkingBuffer;
                source.connect(context.destination);
                source.start(0); // 同じ音声ならstartだけでも良い？
            }
        //]]></script>
    </head>
    <body onload="init(); load('sample.wav')">
        <form name="form">
            <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
        </form>
    </body>
    
[/code]

参考：<http://www.html5rocks.com/ja/tutorials/webaudio/intro/>




Audio要素は簡単に音声を再生する分には問題ありませんが、  
短い間隔の再生や和音などを行おうとすると上手くいかないことが多いです。

Audio要素を使うのであれば、  
再生が終わるまでボタンを無効にしておくような実装が好ましいかと思います。

もしもより高度な音声再生を行いたいのであれば、  
[Web Audio API](http://www.w3.org/TR/webaudio/)をご利用ください。

以下のコードは、  
Google Chromeで動作確認したものになります。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>音声再生のテスト</title>
        <script>//<![CDATA[
            var context = null;
            var dogBarkingBuffer = null;
    
            function init()
            {
                try {
                    window.AudioContext = window.AudioContext || window.webkitAudioContext;
                    context = new AudioContext();
                }
                catch(e) {
                    context = null;
                    alert("このブラウザではWeb Audio APIがサポートされていません。");
                }
            }
    
            function load(url)
            {
                if (!context) { return; }
                var request = new XMLHttpRequest();
                request.open('GET', url, true);
                request.responseType = 'arraybuffer';
                request.onload = function() {
                    context.decodeAudioData(
                        request.response,
                        function(buffer) {
                            dogBarkingBuffer = buffer;
                            document.getElementById("play").disabled = false;
                        },
                        function()
                        {
                            alert("音声ファイルの読み込みに失敗しました。");
                        });
                }
                request.send();
            }
    
            function playAudio()
            {
                if (!dogBarkingBuffer) { return; }
                var source = context.createBufferSource();
                source.buffer = dogBarkingBuffer;
                source.connect(context.destination);
                source.start(0); // 同じ音声ならstartだけでも良い？
            }
        //]]></script>
    </head>
    <body onload="init(); load('sample.wav')">
        <form name="form">
            <p><input type="button" id="play" name="play" value="再生" onclick="playAudio()" disabled /></p>
        </form>
    </body>
    
[/code]

参考：<http://www.html5rocks.com/ja/tutorials/webaudio/intro/>

