7693


ある要素をクリックするとすぐに音がなるようにしたいと思っています。  
下記の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]


CC BY-SA 3.0
2015-03-09T10:57:46.393
7657
2022-08-06T13:19:21.643
2015-03-10T06:13:47.330
8000
5246
question
javascript web-audio
要素を連続してクリックしても音がなるようにする


`audio.play()` の前に `audio.load()` してください。

[code]

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

サンプルを置いておきます。

[code]

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

[code]

    <link rel="stylesheet" href="http://kiyugadgeter.github.io/wadafm-button/wada.css">
    <h1 id="wadafm">Wada.fm</h1>
    
    <p id="describe">上の「Wada.fm」の文字をクリックすると・・・</p>
    <a href="http://wada.fm"><img src="//kiyugadgeter.github.io/wadafm-button/wadafm.png" id="wadafm_artwork"></a>
    <a href="wada.mp3" id="se" download="//kiyugadgeter.github.io/wadafm-button/wada.mp3">さあみなさんもﾜﾀﾞｴﾌｪ〜ﾑ (SE download link)</a>
     <a href="https://github.com/kiyugadgeter/wadafm-button/fork" id="forkme">Fork me on Github</a>
    
    <audio src="//kiyugadgeter.github.io/wadafm-button/wada.mp3" id="wadafm_audio" preload="auto" type="audio/mp3"></audio>
[/code]

<http://www.html5.jp/tag/elements/media_elements.html#media-element-load-
algorithm> とかが、参考資料になります。


CC BY-SA 4.0
2015-03-10T00:06:02.043
7679
2019-12-13T18:40:39.310
2019-12-13T18:40:39.310
32986
208
7657
answer


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/>


CC BY-SA 3.0
2015-03-10T05:22:37.867
7693
2015-03-10T05:38:37.077
2015-03-10T05:38:37.077
70
70
7657
answer


ちょうど似たようなコードを書いたので置いておきます。  
キーを叩く度にタップ音を出したかったのですが、音声ソースが一つしかないと同時再生が出来なかったので、10個ほどの配列で作成し、audios[i++%10]のオーディオを再生するようにしました。同時に10個まで再生できます。

coffeeをコンパイルしたコードですが失礼

[code]

    var audio, audios, cur, i;
    
    cur = 0;
    
    audios = (function() {
      var _i, _results;
      _results = [];
      for (i = _i = 1; _i <= 10; i = ++_i) {
        audio = new Audio;
        audio.autoplay = false;
        audio.src = './tap.wav';
        _results.push(audio);
      }
      return _results;
    })();
    
    setTimeout(function() {
      cur = 0;
      $('textarea').on('keydown', function() {
        var n;
        n = cur % 10;
        audio = audios[cur % 10];
        audio.play(0);
        return cur++;
      });
    }, 100);
    
[/code]


CC BY-SA 3.0
2015-03-14T13:48:33.070
7912
2015-03-14T13:48:33.070
2674
7657
answer


再生するところを  
audio.currentTime = 0;  
audio.play();  
とすると最初の音が破棄されつながったように聞こえます


CC BY-SA 4.0
2022-08-06T13:19:21.643
90407
2022-08-06T13:19:21.643
53879
7657
answer