javascript - 如何阻止音频重叠？

Question

我有一个简单的 javascript 函数，当我点击一个词时它会播放一个音频文件。这是 HTML 代码:

<div class="word">

  <div class="AR" data-audio="1.mp3">text 1</div>
  <div class="AR" data-audio="2.mp3">text 2</div>
  <div class="AR" data-audio="3.mp3">text 3</div>

</div>

这是javascript代码:

$('.AR').on('click', function (e) {

  // Stopping the audio from overlapping
  var e = event || window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();

  var this_element = event.target || event.srcElement;
  var audio_file = this_element.dataset.audio;
  var audio_url = "https://example.com/" + audio_file;

  if (e.mp3) {
    if(e.mp3.paused) e.mp3.play();
    else e.mp3.pause();
  } else {
      e.mp3 = new Audio(audio_url);
      e.mp3.play();
  }

});

该函数只是从被点击的元素中获取dataset 值并播放音频。这工作正常，但如果我快速连续多次单击一个 div，或者如果我在前一个音频仍在播放时单击另一个元素，音频的播放会相互重叠。我也尝试过添加 stopPropagation() 函数，但这不起作用。这里有什么问题吗？

Answer 1

有多种方法可以实现这一目标。

一种方法是通过 jQuery 的 .data() 方法将 Audio 对象与具有 .AR 类的每个 DIV 元素相关联.对于通过 .each() 方法匹配 .AR 选择的所有元素，可以将此关联作为初始化步骤完成。

您的 click 逻辑随后可以更新，以便所有与 .AR 元素关联的音频对象在被点击的元素开始播放之前暂停和停止 - 这将避免您注意到的“重叠音频”效果:

$('.AR')
.each(function() {
  
  /*
  For each .AR element, preload and instantiate
  an audio object. Associate the audio instance
  with this element (via "audio-object" data key)
  */
  $(this).data('audio-object', new Audio());
  
})
.on('click', function (e) {
  
  /*
  When .AR element is clicked, iterate all .AR
  elements, and pause/reset the associated audio 
  instances (if audio has src attribute).
  This has the effect of "stopping all audio" for
  .AR elements on the page
  */
  $('.AR').each(function() {
    var audio = $(this).data('audio-object');

    if(audio.src) {
      audio.pause();
      audio.currentTime = 0;
    }
  });
  
  /*
  Now that all audio objects for .AR elements 
  have stopped playing, start playing the actual
  audio object for the .AR element that was clicked.

  If the audio object has no src attribute, assign
  to load this audio object instance.
  
  */
  var clickedAudio = $(this).data('audio-object');

  if(!clickedAudio.src) {
    clickedAudio.src = $(this).data('audio');
  }

  clickedAudio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="word">

  <div class="AR" data-audio="https://www.w3schools.com/html/horse.mp3">text 1</div>
  <div class="AR" data-audio="https://www.w3schools.com/html/horse.mp3">text 2</div>
  <div class="AR" data-audio="https://www.w3schools.com/html/horse.mp3">text 3</div>

</div>