3

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

1
  • 1
    audio要素を複数用意して順番に再生すればよいのでは
    – pgrho
    Commented 2015年3月9日 11:00

4 件の回答 4

4

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

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

もしもより高度な音声再生を行いたいのであれば、
Web Audio APIをご利用ください。

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

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

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

1

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

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

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);
1

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

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

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

var wadafm = document.getElementById("wadafm");
var audio = document.getElementById("wadafm_audio");
wadafm.onclick = function (e) {
    audio.load();
    audio.play();
}
<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>

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

1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。