Как запретить выполнение функции до проигрываения audio в JS?

Question

Есть картинки на которые нажимаешь и выпадает определенный звук. Положительный звук и отрицательный. При нажатии на картинку выполняется событие проигрывания звука, но как только нажимаешь на сл. картинку воспроизводится звук, при этом предыдущий звук до конца не проиграл. И играет два звука, налаживаются друг на друга. Как сделать так, что бы сначала воспроизведение полностью заканчивалось и во время воспроизведения звука дальнейшие клики по картинкам не срабатывали, только по окончанию воспроизведения. Извините, если плохо объяснил.

let imagesCollect = document.querySelectorAll(".cont");
imagesCollect.forEach((i) => {
  let imagesItem = this.document.querySelectorAll("img");
  imagesItem.forEach((i, index) => {
    i.addEventListener("click", (e) => {
      if ((e.target.id = `${index + 1}` > 3)) {
        sound();
      }
    });
  });
});

function sound() {
  let aud = new Audio();
  aud.src = "__kirbydx__wah-wah-sad-trombone.mp3";
  aud.play();
}

Answer 1

Можно добавить флаг isWork = true, который означает, что функция уже была запущена, и повесить слушателя на audio. При завершении audio будет срабатывать функция, которая будет устанавливать isWork = false. Примерный код:

let isWork = false;

function play() {
    if (!isWork) return;
    isWork = true;
    ...play
}

let aud = document.getElementById("myAudio");
aud.onended = function() {
    isWork = false;
    alert("The audio has ended");
};

БЛОГ НА HUSL

Как запретить выполнение функции до проигрываения audio в JS?

Ответы (1 шт):