jquery - jQuery播放HTML5音频源

Question

我对JS和jQuery非常陌生。

我编写了一个按钮，以在播放和暂停音频文件之间切换。我遇到的问题是，有时当我单击“播放”按钮时，似乎正在播放同一文件的两个副本。音频重叠，听起来好像有很多混响。

任何想法可能是什么原因造成的？谢谢!

<button class="play"></button>

<audio class="audio-clip" preload="none">
  <source src="audio/file.mp3" type="audio/mpeg">
  <source src="audio/file.ogg" type="audio/ogg">
</audio>

$('.slick-center .audio-clip').trigger('load');


$('audio.audio-clip').on('ended', function(){
    $('.slick-center button.play').removeClass('on');
});

$('button.play').toggle(
    function() {
        $('.slick-center .audio-clip').trigger('play');
        $('.slick-center button.play').addClass('on');
        return false;
    },
    function() {
        $('.slick-center .audio-clip').trigger('pause');
        $('.slick-center button.play').removeClass('on');
        return false;
    }
);

Answer 1

这是因为两个文件的类选择器相同，因此jQuery会立即将它们激活。为每个源定义一个唯一的源ID，并在jQuery中使用ID作为选择器来播放这些文件。