javascript - 如何在 Javascript 中播放相同的音频两次？

Question

我正在构建一个 DTMF 拨号模拟器。某个函数运行后，会执行函数 dial()。目前，我只能听到一次回铃音，但无法让它响两次。

我最初尝试通过将音频 currentTime 重置为 0 并在延迟 4 秒(北美回铃音之间的持续时间)后再次播放来让同一文件播放两次。

这不起作用，所以我想也许 JS 不希望我播放相同的音频两次。因此，我再次将其重新创建为第二个变量，并为 dial() 序列中的下一个变量创建了一个新函数。

这不起作用，但如果我在ringingTone2播放之前添加了一个警报框，那么当我关闭警报时它就会播放。

显然，完成此操作后我无法看到警报对话框。如何让声音播放两次，但中间间隔 4 秒？我也没有成功使用 setTimeout(ring(), 4000) 。

以下是与此问题相关的一些代码:

    var ringingTone1 = new Audio('DTMF-ringbackTone.mp3');
    var ringingTone2 = new Audio('DTMF-ringbackTone.mp3');
    function dial() {
        ring();
        function ring() {
            ringingTone1.play();
            setTimeout(ringingTone2.play(),4000);
        }

现在，JS 基本上会播放一次回铃音，然后继续执行脚本中此后的内容。

以下原因导致其停止工作:

function dial() {
        ring();
        function ring() {
            var played = 0;
            var maxPlay = 2;

            var ringingTone = document.getElementById('music');
            var playBtn = document.getElementById('playbtn');

            ringingTone.onplay = ring() {
              //played counter
              played++;
            };
            ringingTone.addEventListener("ended", ring() {
              //reset to start point
              ringingTone.currentTime = 0;
              if (played < maxPlay) {
                ringingTone.play();
              } else {
                played = 0;
              }
            });
            playBtn.addEventListener("click", ring() {
              ringingTone.play();
            });
        }

这是我的完整脚本:

var availableNumbers = ["0", "911"];
    function numberSuggestion() {
        var randomNumber = Math.random() * availableNumbers.length -1;
        var suggestedNumber = availableNumbers[randomNumber];
        document.getElementById("suggestion").innerHTML = "How about dialing " + suggestedNumber + "? Don't like this number? Click the button above again!";
    }
    var dialTone;
    function offHook() {
        document.getElementById("WE2500").style.display = "none";
        document.getElementById("dialPad").style.display = "block";
        dialTone = new Audio('dialTone.m4a');
        dialTone.play();
    }
    var number = "";
    var timeout;
    function numberDial() {
        if (dialTone) {
            dialTone.pause();
            dialTone.currentTime = 0;
        }
        clearTimeout(timeout);
        timeout = setTimeout(dial, 2000);
    }
    function dial1() {
        numberDial();
        number = number + "1";
        var tone1 = new Audio('DTMF-1.wav');
        tone1.play();
    }
    function dial2() {
        numberDial();
        number = number + "2";
        var tone2 = new Audio('DTMF-2.wav');
        tone2.play();
    }
    function dial3() {
        numberDial();
        number = number + "3";
        var tone3 = new Audio('DTMF-3.wav');
        tone3.play();
    }
    function dial4() {
        numberDial();
        number = number + "4";
        var tone4 = new Audio('DTMF-5.wav');
        tone4.play();
    }
    function dial5() {
        numberDial();
        number = number + "5";
        var tone5 = new Audio('DTMF-5.wav');
        tone5.play();
    }
    function dial6() {
        numberDial();
        number = number + "6";
        var tone6 = new Audio('DTMF-6.wav');
        tone6.play();
    }
    function dial7() {
        numberDial();
        number = number + "7";
        var tone7 = new Audio('DTMF-7.wav');
        tone7.play();
    }
    function dial8() {
        numberDial();
        number = number + "8";
        var tone8 = new Audio('DTMF-8.wav');
        tone8.play();
    }
    function dial9() {
        numberDial();
        number = number + "9";
        var tone9 = new Audio('DTMF-9.wav');
        tone9.play();
    }
    function dial0() {
        numberDial();
        number = number + "0";
        var tone0 = new Audio('DTMF-0.wav');
        tone0.play();
    }
    function dialStar() {
        numberDial();
        number = number + "*";
        var toneStar = new Audio('DTMF-star.wav');
        toneStar.play();
    }
    function dialPound() {
        numberDial();
        number = number + "#";
        var tonePound = new Audio('DTMF-pound.wav');
        tonePound.play();
    }
    //var ringingTone1 = new Audio('DTMF-ringbackTone.mp3');
    //var ringingTone2 = new Audio('DTMF-ringbackTone.mp3');
    function dial() {
        ring();
        function ring() {
            var played = 0;
            var maxPlay = 2;

            var ringingTone = document.getElementById('music');
            var playBtn = document.getElementById('playbtn');

            ringingTone.onplay = ring() {
              //played counter
              played++;
            };
            ringingTone.addEventListener("ended", ring() {
              //reset to start point
              ringingTone.currentTime = 0;
              if (played < maxPlay) {
                ringingTone.play();
              } else {
                played = 0;
              }
            });
            playBtn.addEventListener("click", ring() {
              ringingTone.play();
            });
        }
        switch(number) {
            case "0":
                break;
            case "911":
                var pickup911 = new Audio('911-xxx-fleet.mp3');
                pickup911.play();
                break;
            default:
        }
    }

Answer 1

这个想法很简单，一个计数器代表游戏时间，一个常数代表最大游戏时间。

使用 onplay 事件在每次播放音频时增加计数器。

如果尚未达到最大播放时间，请使用 ending 事件重播音频。否则，将播放次数设置为 0。

var played = 0;
var maxPlay = 2;

var ringingTone = document.getElementById('music');
var playBtn = document.getElementById('playbtn');

ringingTone.onplay = function() {
  //played counter
  played++;
};

ringingTone.addEventListener("ended", function() {
  //reset to start point
  ringingTone.currentTime = 0;
  if (played < maxPlay) {
    ringingTone.play();
  } else {
    played = 0;
  }
});

playBtn.addEventListener("click", function() {
  ringingTone.play();
});

<audio id="music" src="http://www.noiseaddicts.com/samples_1w72b820/3732.mp3"></audio>

<button id="playbtn">Play me</button>