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作为选择器来播放这些文件。

Answer 2

您可以尝试这样的事情：

var playing = false;

$('.play').click(function() {
    playing = !playing;
    $('.play').toggleClass('on');
    if (playing) {
        $('.audio-clip').trigger('play');
    }
    else {
        $('.audio-clip').trigger('pause');
    }
});

我建议使用howler.js或Buzz等库来播放音频。这些易于使用并解决跨浏览器问题。

Answer 3

原来这是在无限模式下使用Slick Slider的结果。我不确定如果你需要将它保持在无限模式下，确切的是什么，但是将滑块更改为无限：false解决了问题。

jQuery播放两个HTML5音频源

3 个答案: