Question

我正在构建一个DTMF拨号模拟器。运行某个功能后，执行功能拨盘（）。目前，我听过一次回铃音，但我不能让它响两次。

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

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

这不起作用，但是如果我在响铃Tone2播放之前添加了一个警告框，它会在我解除警报后立即播放。

显然，完成此操作后，我无法建立警告对话框。如何让声音播放两次，但两者之间有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事件增加计数器。

如果尚未达到最长播放时间，请使用ended事件重播音频。否则，将播放次数设置为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>

Answer 2

使用（）调用setTimeout中的函数（我认为它适用于所有回调）将导致立即评估内部代码（在您的情况下，这意味着同时播放两个音频）。

因此我上面的评论使用.play而没有（），这看起来并不起作用。但是，这确实有效：

function dial() {
  function ring() {
    ringingTone.play();
  }
  ring();
  setTimeout(ring, 4000);
}
dial();

http://jsfiddle.net/tL3monyp/

（音频src肆无忌惮地复制了丹尼尔的答案; - ）

我还添加了两个超时来说明使用和不使用（）调用函数。

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

2 个答案: