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

Posted 2023-02-25

【中文标题】播放/暂停所有音频链接的通用功能

【英文标题】：General function to play/pause all audio links

【发布时间】：2019-06-06 11:43:29

【问题描述】：

我有一个带有一堆音频链接的 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>

【问题讨论】：

添加部分代码，看看你是怎么做的以及在哪里触摸代码

【参考方案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>

【讨论】：

这看起来很不错，但我无法让它工作。当我添加这个时，点击我的链接什么都不会播放（在此之前有声音）。

如果重要，链接是 URL，因此音频不会存储在本地。

@CHRD 抱歉，这是一个愚蠢的问题，但您是否将“sound1.mp3”和其他文件替换为 mp3 文件的链接？

哈哈是的我有XD

@CHRD 控制台有错误吗？它对我有用，所以我需要更多信息来帮助你:)

【参考方案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();
    );