正在播放当前音频以及如何在单击同一按钮时暂停所有其他音频

Posted

技术标签:

【中文标题】正在播放当前音频以及如何在单击同一按钮时暂停所有其他音频【英文标题】:all other audio should get stop when current audio is playing and how to pause on same button clicked 【发布时间】:2016-07-22 19:37:51 【问题描述】:

我想在播放当前音频时停止其他音频,应该通过单击相同按钮暂停并通过单击相同按钮播放 plzz 帮助

<!DOCTYPE html>
<html>
  <head>
     <title>Audio</title>
  </head>
  <body>
    <audio id="sound1" src="1.mp3" preload="auto"></audio>
    <button onclick="document.getElementById('sound1').play();">Play it</button>
    <audio id="sound2" src="2.mp3" preload="auto"></audio>
    <button onclick="document.getElementById('sound2').play();">Play it</button>
    <audio id="sound3" src="3.mp3" preload="auto"></audio>
    <button onclick="document.getElementById('sound3').play();">Play it</button>
  </body>
</html>

【问题讨论】:

【参考方案1】:

您可以通过创建一个函数来解决此问题,该函数接收您要播放的音频(1、2 或 3)的 ID、播放它并暂停其他音频元素:

function playAudio(audioNumber) 
    var audio = document.getElementById('sound' + audioNumber);
    audio.play();
    var notPlaying = [1,2,3];
    notPlaying.splice(notPlaying.indexOf(audioNumber), 1);
    notPlaying.forEach(function(id) 
        document.getElementById('sound' + id).pause();
    );
;

然后在每次单击按钮时运行该函数并传入它们各自的 ID

<audio id="sound1" src="1.mp3" preload="auto"></audio>
<button onclick="playAudio(1);">Play it</button>
<audio id="sound2" src="2.mp3" preload="auto"></audio>
<button onclick="playAudio(2);">Play it</button>
<audio id="sound3" src="3.mp3" preload="auto"></audio>
<button onclick="playAudio(3);">Play it</button>

【讨论】:

以上是关于正在播放当前音频以及如何在单击同一按钮时暂停所有其他音频的主要内容,如果未能解决你的问题,请参考以下文章

使用当前音频 javascript 创建播放/暂停功能

如何在播放/暂停控制功能中停止无限循环

如何在点击时暂停音乐?

更改单击脚本上的文本

单击 div 框时不播放音频

不同按钮上的音频播放/暂停单击Jquery