按钮停止多个音轨

Posted 2023-02-25

【中文标题】按钮停止多个音轨

【英文标题】：Button stops multiple audio tracks

【发布时间】：2017-06-18 14:43:31

【问题描述】：

我正在创建一个 Launchpad，每行由 8 个按钮/音轨和一个停止按钮组成。我希望每个停止按钮在按下时停止该行上的所有音频播放，例如停止按钮 1 将停止声音 (1) 到声音 (8)。有任何想法吗？我将在下面留下我的代码（忽略用于图像的 offImg/onImg）：

JS：

var audio = [];
var isPlaying = [];

function sound(id)
  if(isPlaying[id])
    audio[id].pause();
    isPlaying[id] = false;
    audio[id].currentTime = 0;
  
  else
    audio[id].play();
    isPlaying[id] = true;
    audio[id].currentTime = 0;
  


function createAudio(src,i)
  audio[i] = new Audio();
  audio[i].src = src;
  audio[i].loop = true;
  isPlaying[i] = false;

html：

<img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
<img class="top" src="images/pink.png" onclick="sound(2); this.src = (this.src.endsWith(offD2)? onImgPnk : offD2);"/>
<img class="top" src="images/pink.png" onclick="sound(3); this.src = (this.src.endsWith(offD3)? onImgPnk : offD3);"/>
<img class="top" src="images/pink.png" onclick="sound(4); this.src = (this.src.endsWith(offD4)? onImgPnk : offD4);"/>
<img class="top" src="images/pink.png" onclick="sound(5); this.src = (this.src.endsWith(offD5)? onImgPnk : offD5);"/>
<img class="top" src="images/pink.png" onclick="sound(6); this.src = (this.src.endsWith(offD6)? onImgPnk : offD6);"/>
<img class="top" src="images/pink.png" onclick="sound(7); this.src = (this.src.endsWith(offD7)? onImgPnk : offD7);"/>
<img class="top" src="images/pink.png" onclick="sound(8); this.src = (this.src.endsWith(offD8)? onImgPnk : offD8);"/>
<img class="muteTop" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<div class="top"></div> ***** <--- THIS IS THE STOP BUTTON *****

编辑

var stopButton = document.getElementById(stop1); 

stopButton.addEventListener('click', stopAllAudio);

function stopAllAudio()
      var audios = document.getElementsByClassName("top"),
          len = audios.length,
          i = 0;
      for (; i < len; i++)
          audios[i].currentTime = 0;
          audios[i].pause();
          isPlaying[i] = false;
      

HTML：

<img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
<img class="top" src="images/pink.png" onclick="sound(2); this.src = (this.src.endsWith(offD2)? onImgPnk : offD2);"/>
<img class="top" src="images/pink.png" onclick="sound(3); this.src = (this.src.endsWith(offD3)? onImgPnk : offD3);"/>
<img class="top" src="images/pink.png" onclick="sound(4); this.src = (this.src.endsWith(offD4)? onImgPnk : offD4);"/>
<img class="top" src="images/pink.png" onclick="sound(5); this.src = (this.src.endsWith(offD5)? onImgPnk : offD5);"/>
<img class="top" src="images/pink.png" onclick="sound(6); this.src = (this.src.endsWith(offD6)? onImgPnk : offD6);"/>
<img class="top" src="images/pink.png" onclick="sound(7); this.src = (this.src.endsWith(offD7)? onImgPnk : offD7);"/>
<img class="top" src="images/pink.png" onclick="sound(8); this.src = (this.src.endsWith(offD8)? onImgPnk : offD8);"/>
<img class="muteTop" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<div class="top" id="stop1"></div> ***** <--- THIS IS THE STOP BUTTON *****

【参考方案1】：

希望这能给你一些想法。

var stopButton = ...; // select your stop button

stopButton.addEventListener('click', stopAllAudio);

function stopAllAudio()
    var audios = document.getElementsByTagName('audio'),
        len = audios.length,
        i;
    for (i = 0; i < len; i++)
        audios[i].currentTime = 0;
        audios[i].pause();
        isPlaying[i] = false;
    

您可以使用以下方式选择元素：

Select by Id Select by ClassName Select by TagName

您可以使用addEventListener 在某些元素上触发函数。

您可以使用for loop 循环遍历选定的元素。

【讨论】：

谢谢，这似乎很有帮助。我是 JS 新手，知道如何实现它吗？

已更新。你的停止按钮有id吗？如果是，var stopButton = document.getElementById(/* stop button's id */);

如何向停止按钮添加 id？

@NathanWilson 通过 HTML 添加 <div class="top" id="stopButton"></div> 是最简单的方法。

好吧我觉得我现在明白了，但是在实现代码之后它不允许我点击任何按钮。我已经编辑了我的问题中的代码，让您再看一看。

【参考方案2】：

如果你的所有行都定义明确，你可以这样做：

HTML

<div class="row">
    <img class="top" src="images/pink.png" onclick="sound(1); this.src = (this.src.endsWith(offD1)? onImgPnk : offD1);"/>
    [...]
    <div class="stop"></div>
</div>

JS

$(document).on('click','.stop',function()
    $(this).siblings('img.top').each(function()
        audio[$(this).index()+1].pause();
        audio[$(this).index()+1].currentTime = 0;
        isPlaying[$(this).index()+1] = false;
    );
);

基本上，您会听到对.stop div 的点击。

当单击一个时，您会搜索同一父级中的所有其他 img.top 元素，然后将它们逐个 .pause() 搜索。

我在这里使用了 JQuery，因为它更简单、更快捷。 但如果你想要一个纯 javascript 解决方案，请告诉我。