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

Question

[Web-Building]

Доброго времени суток всем!
При клике по первой кнопке, 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();
    });

Answer 1

[Алексей Абрамов]

У вас при обоих кликах создаются новые экземпляры Audio.
Нужно вынести переменную audioCube за пределы функций.

let audioCube = new Audio('audio.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();
    });