Автозапуск аудио файла на активном Div

Question

Я ужасен в JS, и я пробовал десятки вещей, чтобы сделать эту работу, но, похоже, ничего не работает для меня.

Я хочу, чтобы файл AUDIO1 воспроизводился, а файл AUDIO2 автоматически приостанавливался, когда определенный элемент div имеет класс "elementor-active", и наоборот.

Любая помощь приветствуется.

Вот мой код:

<div id="elementor-tab-title-1601" class="elementor-active">TAB 1</div><div id="elementor-tab-title-1602" class="">TAB 2</div>
<div id="TAB1" class="active" style="display: block;">
<audio id="AUDIO1" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.ogg">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio1.mp3" type="audio/mpeg">
</audio></div>
<div id="TAB2" class="">
<audio id="AUDIO2" loop="loop">
<source src="http://localhost/test/wp-content/uploads/2018/06/audio2.ogg">
<source src="http://localhost/grad/wp-content/uploads/2018/06/audio2.mp3" type="audio/mpeg">
</audio>
</div>

Answer 1

Например:

var audio_one = new Audio('PATH_TO_AUDIO_1');
var audio_two = new Audio('PATH_TO_AUDIO_2');

var timerId = setInterval(function() {
  if ($('YOUR_BLOCK_SELECTOR').hasClass('active')) {
    audio_one.play();
    audio_two.pause();
  } else {
    audio_one.pause();
    audio_two.play();
  }
}, 250);