Почему при клике по другой кнопке, audio не прекращает воспроизведение?

всем! При клике по первой кнопке, audio - воспроизводится, а при клике по другой кнопке - не останавливается. В чём может быть причина?? Благодарю за Ваше внимание!

<div>
              <audio loop> <!-- По клику на id="btn-animate-start" запускается Audio -->
                 <source src="audio.mp3">
                 <source src="audio.ogg">
                 <source src="audio.wav"> 
              </audio> 

           <button id="btn-animate-start" class="start-btn-animate">Start Animate!</button>
            <button id="btn-animate-stop" class="stop-btn-animate">Stop Animate!</button>
</div>

// Start Audio!
    $("#btn-animate-start").on( "click", function play() {
        var audioCube = new Audio('audio.mp3'); 
        audioCube.play();
        audioCube.loop = true;
    });

    // Stop Audio!
    $("#btn-animate-stop").on( "click", function pause() {
        var audioCube = new Audio('audio.mp3');
        audioCube.pause();
    });


Ответы (1 шт):

Автор решения: Sevastopol'

var audioCube = new Audio('https://hotmo.org/get/music/20200117/MORGENSHTERN_Vitya_AK_-_RATATATATA_68022799.mp3');

// Start Audio!
$("#btn-animate-start").on("click", function play() {
  audioCube.play();
  audioCube.loop = true;
});

// Stop Audio!
$("#btn-animate-stop").on("click", function pause() {
  audioCube.pause();
  audioCube.loop = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <audio loop> <!-- По клику на id="btn-animate-start" запускается Audio -->
                 <source src="https://hotmo.org/get/music/20200117/MORGENSHTERN_Vitya_AK_-_RATATATATA_68022799.mp3">
                 <source src="audio.ogg">
                 <source src="audio.wav"> 
              </audio>

  <button id="btn-animate-start" class="start-btn-animate">Start Animate!</button>
  <button id="btn-animate-stop" class="stop-btn-animate">Stop Animate!</button>
</div>

→ Ссылка