Q:

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

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

When I click any button twice it plays the audio twice (3clicks = 3time being played at the same time ... and  so on)
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);

A:

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>

