Автоматическое воспроизведение звука при загрузке div

Question

У меня есть страница HTML с несколькими div, каждый из которых загружается при следующем нажатии кнопки. Мне нужно автоматически воспроизводить звук при загрузке div. И остановить / приостановить предыдущий звук при загрузке следующего div. Как это сделать?

<script>
  function next() {
    var qElems = document.querySelectorAll("#questions>div");
    for (var i = 0; i < qElems.length; i++) {
      if (qElems[i].style.display != "none") {
        qElems[i].style.display = "none";
        if (i == qElems.length - 1) {
          qElems[0].style.display = "block";
        } else {
          qElems[i + 1].style.display = "block";
        }
        break;
      }
    }
  }
</script>

  * {box-sizing: border-box;}
    .column {float: left; width: 50%; padding: 10px;}
    .row: after {content: ""; display: table; clear: both;}

Пожалуйста, помогите

Обновление: Я внес некоторые изменения. Теперь я могу автоматически воспроизводить только первый звук. Как применить их ко всем аудио. Кроме того, я не могу остановить предыдущий звук.

• добавлено внутри тега аудио: onloadeddata="this.play();" playsinline muted controls></audio>
• и внутри next(): document.getElementById("myAudio").muted = false;

Теперь под сомнение:

• Как применить это автовоспроизведение для всего аудио, а в chrome браузере?
• Как остановить предыдущее звук при воспроизведении?

Answer 1

Поскольку jQuery включен в HTML, его можно использовать для изменения функции next

<script>
    function next(){
      if($(this).closest('.row').next('.row').length){
        $(this).closest('.row').find('audio')[0].pause();
        $(this).closest('.row').hide();
        $(this).closest('.row').next('.row').show();
        $(this).closest('.row').next('.row').find('audio')[0].play();
      }
    }
</script>

Теперь о первом элементе можно позаботиться двумя способами. Во-первых, вы можете включить это в конец body элемента

 <script>
    $('.row#d002').show();  // using d002 id here, replace it with id of first element with class='row'
    $('.row#d002').find('audio')[0].play();
</script>

В противном случае вы можете добавить атрибут autoplay в первый элемент audio и удалить display:none из первого элемента с помощью class='row'