播放/暂停所有音频链接的通用功能

Question

我有一个带有一堆音频链接的 html。我正在尝试让我的所有音频链接在点击时播放/暂停，我已经尝试了解决方案here。这正是我所追求的，除了我现在坚持修改此函数以应用于我的代码中的所有音频链接（因为我无法为每个链接定义一个函数）。关于如何做到这一点的想法？

例子：

<script type="text/javascript">
function loadAudio(source) {
currentSource = source;
audioSource.src = source;
audio.load();
}

var audio = document.getElementById('audio');
var audioSource = document.getElementById('audioSource');
var currentSource;

document.querySelectorAll('.play-audio').forEach(function(link) {
link.addEventListener('click', function() {
var linkSource = this.dataset.audio;

if (currentSource === linkSource) {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
} else {
  loadAudio(linkSource);
  audio.play();
}
});
});
</script>

<audio id="audio">
<source id="audioSource" src=""></source>
Your browser does not support the audio format.
</audio>

<table>
<tr>
<td><a href="#" class="play-audio" data-audio="https://...1">Play 1</a></td>
</tr>
<tr>
<td><a href="#" class="play-audio" data-audio="https://...2">Play 2</a></td>
</tr>
</table>

Answer 1

如果您想一次播放一个音频。您可以通过根据单击的链接更改源来通过相同的音频元素播放它们：

function loadAudio(source) {
  currentSource = source;
  audioSource.src = source;
  audio.load();
}

var audio = document.getElementById('audio');
var audioSource = document.getElementById('audioSource');
var currentSource;

document.querySelectorAll('.play-audio').forEach(function(link) {
  link.addEventListener('click', function() {
    var linkSource = this.dataset.audio;

    if (currentSource === linkSource) {
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    } else {
      loadAudio(linkSource);
      audio.play();
    }
  });
});

<audio id="audio">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

<a href="#" class="play-audio" data-audio="sound1.mp3">Click here to hear 1.</a>
<a href="#" class="play-audio" data-audio="sound2.mp3">Click here to hear 2.</a>
<a href="#" class="play-audio" data-audio="sound3.mp3">Click here to hear 3.</a>

Answer 2

您可以使用选择器来查找和暂停/播放播放器。

假设您有 4 个<audio> 标签

<div class='audio-container'>
    <audio id="audio1" src="/Demo1.mp3"></audio>
    <a class='audio-play'>Click here to hear 1.</a>
</div>

<div class='audio-container'>
    <audio id="audio2" src="/Demo2.mp3"></audio>
    <a class='audio-play'>Click here to hear 2.</a>
</div>

<div class='audio-container'>
    <audio id="audio3" src="/Demo3.mp3"></audio>
    <a class='audio-play'>Click here to hear 3.</a>
</div>

<div class='audio-container'>
    <audio id="audio4" src="/Demo4.mp3"></audio>
    <a class='audio-play'>Click here to hear 4.</a>
</div>

使用 JQuery：

$(".audio-container .audio-play").off("click").on("click", function() {
    // $(this) -> ref to the currently clicked <a/>
    //get the [0] element of the FIND query, because a TAG selector returns an array of found elements
    var audio = $(this).parent().find("audio")[0];

    var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
    var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
    var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;

    if(hasNotStarted || hasEnded || isPaused)
        audio.play()
    else 
        audio.pause();
});

纯 JS

//in plain JS, you will have to add a click event listener, on each element

var audioElems = document.querySelectorAll(".audio-container .audio-play");

for (var i = 0; i < audioElems.length; i++) {
    audioElems[i].addEventListener("click", function() {
        var audio = this.parentNode.children[0]

        var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
        var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
        var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;

        if(hasNotStarted || hasEnded || isPaused)
            audio.play()
        else 
            audio.pause();
    });
}