单击其他时停止播放音频，多次单击时无重复事件

Question

这是我的代码。我有 2 个按钮，一个链接到 #streama，另一个链接到 streamb。我有两个问题：

当我点击任意按钮两次时，它会播放两次音频（点击 3 次 = 同时播放 3 次...等等）
当我点击任何按钮时，其他音频必须停止，这样新点击的按钮才能单独播放

代码：

(function($) {
  $("#strama").on("click", function(event) {
    var hassen = new Audio('http://mywebsite:8000/streama');
    hassen.play();
    event.preventDefault();
  });
})(jQuery);

(function($) {
  $("#streamb").on("click", function(event) {
    var hassen = new Audio('http://mywebsite:8000/streamb');
    hassen.play();
    event.preventDefault();
  });
})(jQuery);

Answer 1

工作示例

(function($) {

  playStream($, "#stramb", "http://www.hubharp.com/web_sound/BachGavotteShort.mp3");
  playStream($, "#strama", "http://www.hubharp.com/web_sound/PurcellSongMus.mp3");
  $('#stop-play').on("click", function(evt) {

    event.preventDefault();
    
    $('.stream-button').removeClass('active');
    $(this).hide();
    
    console.clear();
    console.log(`Stopped stream: ${activeSelector}`);
    
    activeSelector = undefined;
    removeAudios();

  });

})(jQuery);


var audios = [];
var activeSelector;

function playStream($, selector, stream) {

  $(selector).on("click", function(evt) {

    console.clear();
    event.preventDefault();

    $('.stream-button').removeClass('active');
    $(this).addClass('active');

    if (!activeSelector || (activeSelector !== selector)) {
      activeSelector = selector;
      removeAudios();
    }

    var audio = new Audio(stream);
    audio.play();
    audios.push(audio);

    $('#stop-play').show();
    
    console.log(`Played stream: ${selector}`);
    console.log(`No of audios played: ${audios.length}`);

  });

}

function removeAudios() {

  audios.forEach(a => a.src = '');
  audios = [];

}

.stream-button.active {
  background-color: #0095ff;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="strama" class="stream-button">Stream A</button>
<button id="stramb" class="stream-button">Stream B</button>
<button id="stop-play" style="display: none">Stop Playing</button>

Answer 2

您应该为音频创建一个全局对象并仅使用它。

(function($) {
    var hassen = new Audio();
    var current_stream = '';

    $( '#streama' ).on( 'click', function(e) {
        e.preventDefault();

        hassen.src = 'https://sampleswap.org/mp3/artist/92209/construct_Set-Fire-to-the-Rain-Dubst-160.mp3';
        hassen.play();
        current_stream = 'Stream A';

        $( '#play-pause' ).text( current_stream + ' - Pause' );
        $( this ).addClass( 'active' );
        $( '#streamb' ).removeClass( 'active' );
    });

    $( '#streamb' ).on( 'click', function(e) {
        e.preventDefault();

        hassen.src = 'https://sampleswap.org/mp3/artist/167001/AL3X_Flight-160.mp3';
        hassen.play();
        current_stream = 'Stream B';

        $( '#play-pause' ).text( current_stream + ' - Pause' );
        $( this ).addClass( 'active' );
        $( '#streama' ).removeClass( 'active' );
    });

    $( '#play-pause' ).on( 'click', function(e) {
        e.preventDefault();

        if ( hassen.paused ) {
          $( this ).text( current_stream + ' - Pause' );
          hassen.play();
        } else {
          $( this ).text( current_stream + ' - Play' );
          hassen.pause();
        }
    });
})(jQuery);

.active {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="streama">Stream A</button>
<button id="streamb">Stream B</button>
<button id="play-pause">Play</button>

单击其他时停止播放音频，多次单击时无重复事件

Stop playing audio when other is clicked and no repeat event when multi click

javascript

jquery

jquery-events