20 Saniye sonra müzik duran böyle bir kodum var ancak websitede videolarda mevcut. Yapmak istediğim video oynatmaya bastığında yani video oynarken bu müziğin durması bunu nasıl yapabilirim?

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<style>
.music-box {
    
}
 .music-box.playing {
    
}
 .music-box audio {
     display: none;
}
 .music-box .btn {
     padding: 10px;
     margin: 50px auto 20px;
     display: block;
     cursor: pointer;
     border: none;
     border-radius: 10px 0px;
     transition: all 0.3s;
     box-shadow: inset 0 0 200px rgb(0 0 0 / 0%);
}
 .music-box .btn .fa {
     font-size: 20px;
     color: #333;
}
 .music-box .btn.play {
     background-color: white;
}
 .music-box .btn.pause {
     background-color: white;
     transform: rotate(90deg);
}
 .music-box .btn.pause .fa {
     transform: rotate(-90deg);
}
 
</style>  

<div class="music-box">
  <button  class="btn btn-play-music play"><i class="fa fa-play"></i></button>
  <br>
  
</div>
  <script>
  
var audio = document.createElement("audio");
audio.src = "https://www.rlbluxury.com/wp-content/uploads/2022/05/enya-only-time-official-4k-music-video.mp3";

audio.addEventListener("canplaythrough", function () {

        audio.play();
        setTimeout(function(){
            audio.pause();
        },
        20000);

    }, false);
    
var isPlaying = false;

$('.btn-play-music').click(function(){
    $(this).toggleClass('pause');
    $(this).parent('.music-box').toggleClass('playing');
    $(this).find('.fa').toggleClass('fa-pause');
    if (isPlaying) {
      audio.pause()
    } else {
      audio.play();
    }
});
audio.onplaying = function() {
  isPlaying = true;
};
audio.onpause = function() {
  isPlaying = false;
};
  </script>