javascript - 如何停止其他功能启动的音频？

Question

我正在尝试仅使用HTML，CSS和JavaScript创建DTMF键盘模拟器，

我的声音有小问题。单击图像时，将运行offHook()函数，该函数开始播放拨号音。但是，我希望该拨号音在单击第一个数字后立即停止(或在我有键盘监听器时按一次)。对于与单击的各个按钮相关的每个数字功能，即Dial1()，dial2()等，我运行了numberDial()函数，该函数应停止拨号音。但是，它拒绝停止。

我努力了:

-dialTone.pause();

-dialTone.stop();

-dialTone.src =“”;

无论如何，拨号音都会继续。运行numberDial()时如何使其停止？每次按下数字都会运行此功能(我将在后面添加其他内容)，因此它将仅停止第一个数字的音频，但在其他时间也不会造成任何损害。

我的理解是函数numberDial()应该可以识别变量DialTone-那么为什么DialTone拒绝暂停？

function offHook() {
  document.getElementById("WE2500").style.display = "none";
  document.getElementById("dialPad").style.display = "block";
  var dialTone = new Audio('dialTone.m4a');
  dialTone.play();
}

var number = "";

function numberDial() {
  dialTone.src = "";
}

function dial1() {
  numberDial();
  number = number + "1";
  var tone1 = new Audio('DTMF-1.wav');
  tone1.play();
}

Answer 1

这里的问题是“我的理解是函数numberDial()应该识别变量DialTone”。您的理解确实是非常错误的:在函数内部用allocator关键字(var, let或`const)声明的变量不会在这些函数之外持久存在。这几乎是每种常规编程语言的工作方式，因此您认为它会持续存在的事实令人感到好奇吗？可能值得阅读有关Javascript如何工作的信息。

唯一的错误是，如果您根本不使用分配器来声明变量，但这是一个极端的坏习惯:始终使用allocator关键字并确保正确定义它们的范围。

因此，让我们这样做:您只能在var dialTone函数内部访问在offHook()函数中定义的offHook。如果您需要在全局级别访问它，则必须在全局级别将其声明，即使您不进行初始化，直到调用offHook函数为止:

var dialTone;

function offHook() {
  ...
  dialTone = new Audio('dialTone.m4a'); // note: NO 'var'. It already exists.
  dialTone.play();
}

function numberDial() {
  // we now need to make sure we only stop dialTone if
  // the dialTone variable actually points to something.
  if (dialTone) {
    // see http://stackoverflow.com/questions/14834520 on why this "stops" audio.
    dialTone.pause();
    dialTone.currentTime = 0;
  }
}