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

2020-05-23 javascript jquery jquery-events

This is my code. I have 2 buttons one is linked to #streama and the other is linked to streamb. I have two problems:

  1. When I click any button twice it plays the audio twice (3clicks = 3time being played at the same time ... and so on)
  2. When I click any button the other audio must stops so it allow the new clicked button to play alone

Code:

(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);

Answers

Working example

(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>

You should make a global object for audio and use that only.

(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>

Related