Как победить тег audio? Почему не проигрывается второй раз?

Question

[boga-net]

На страницу добавлен тег audio. С атрибутом autoplay он проигрывается, но лишь единожды. Как заставить его проигрываться каждый раз, когда я кликаю на какой-либо элемент и вызываю функцию проигрывания?
В моём случае - все элементы с классом "btn".

Весь код

$('.btn').on('click', function() {
  enableSound();
});

// Проверяю наличие атрибута autoplay и если его нет - добавляю. По истечение какого-то времени, удаляю. 
function enableSound() {
  $('#for-sound').find('audio').attr('autoplay', 'autoplay');
  setTimeout(function() {
    $('#for-sound').find('audio').removeAttr('autoplay', 'autoplay');
  }, 1000);
};

Неужто придётся каждый раз его добавлять при клике, чтобы проигрывался?
И, кстати, что с громкостью? Не нашёл атрибут volume или типа того.
И, да, если сам тег не кроссбраузерный или есть что-то получше (тег, плагин, костыль, решение) - буду благодарен.

Answer 1

[0xD34F]

Как-то всё у вас до хрена усложнено, просто мрак какой-то. Можно же гораздо проще:

<div id="sound-btn-wrapper">
  <div class="btn btn-start">On</div>
  <div class="btn btn-stop">Off</div>
</div>

const audio = new Audio('...');

$('#sound-btn-wrapper').on('click', '.btn', function() {
  audio.pause();

  if ($(this).hasClass('btn-start')) {
    audio.currentTime = 0;
    audio.play();
  }
});

Comments

[boga-net]

Превосходно ) Премного благодарен