HTML5 - 如何将特定的 JS 函数关联到每个按钮

Question

我已经成功制作了一个 html 页面，在其中我可以创建与各个按钮关联的不同音频文件的音板。每个按钮都会播放一个音频文件，当您单击不同的按钮时，上一个音频文件将停止播放，而下一个音频文件将开始播放。为此，我创建了一个 “controls onplay” JS 函数，该函数适用于页面上全局的所有按钮。

function pauseOthers(ele) 
{
  $("audio").not(ele).each(function (index, audio)
  {
  audio.pause();
  audio.currentTime = 0
  });
}

现在，如果我想停止播放当前选定的音频，我创建了一个与“onclick”参数关联的函数“Stop()”，以停止与按钮关联的音频播放：

function Stop()
      {
    var Audio = document.getElementById("sound1");
        if(Audio.paused) {
            Audio.play();
        }
        else {
           Audio.pause(); Audio.currentTime = 0
        }
      }

对应源码如下：

<button type="button" class="btn btn-lg btn-block" onclick="Stop()">Dream for Dreaming</button>
                    <audio hidden preload="auto" id="sound1" controls onplay="pauseOthers(this);">
                        <source src="AUDIO FILES\Dream for Dreaming.mp3" type="audio/mpeg">
                    </audio>

但是，这种应用不同的“Stop()”变量（例如 Stop2()、Stop3() 等）的方法（每个变量与不同的音频文件 ID 相关联）效率不高，我清楚地看到我需要使用替代方法方法而不是使用“getElementById”。我不知道如何将此 JS 函数编程为对于所有选定的按钮都是全局的。不是为每个音频文件创建单独的函数，而是如何通过单个 JS 函数调用每个音频文件以在单击不同按钮时停止播放？

Answer 1

您可以在 Stop 函数中将要停止的元素的 id 作为参数传递。

function Stop(id) {
  var Audio = document.getElementById(id);
  if(Audio.paused) {
      Audio.play();
    } else {
      Audio.pause();
      Audio.currentTime = 0
    }
}

<button type="button" class="btn btn-lg btn-block" onclick="Stop('sound1')">Dream for Dreaming</button>
                    <audio hidden preload="auto" id="sound1" controls onplay="pauseOthers(this);">
                        <source src="AUDIO FILES\Dream for Dreaming.mp3" type="audio/mpeg">
                    </audio>

然后，只需更改您想要停止的元素的 id。