Воспроизведение аудиофайла только при открытии модалов

#javascript #html

#javascript #HTML

Вопрос:

У меня есть кнопка запуска, которая открывает модал, когда кто-то нажимает на нее, и в то же время она воспроизводит аудиофайл. Пока все хорошо.

Где я борюсь, как воспроизвести аудиофайл только при открытии модальности? На данный момент он воспроизводит звук каждый раз, поэтому, если кто-то его откроет, и если кто-то его закроет. Итак, каждый раз .pop-icon , когда нажимается триггер.

JS:

  $(document).ready(function () {
    var e = document.createElement("audio");
    (e.src = "https://intern.globallabs.de/message.mp3"),
        (e.volume = 0.5),
        (e.autoPlay = !1),
        (e.preLoad = !0),
        $(".pop-icon").click(function () {
            e.play();
        });
});

Триггер HTML:

 <div class="pop-icon">...</div>

Ответ №1:

Хорошо, я понимаю… В этом случае вы могли бы использовать атрибут для сохранения состояния модальности:

 // Some shorthands
const $ = document;
$.get = $.getElementById;
const log = console.log;
const warn = console.warn;
const error = console.error;

const trigger = $.get('trigger');

trigger.addEventListener('click', function() {
  if (trigger.getAttribute('data-is-open') == 'false') {
    trigger.setAttribute('data-is-open', 'true');
    $.get('modal').style.display = 'block';
    trigger.innerHTML = 'close';
    playSound('https://intern.globallabs.de/message.mp3');
  } else {
    $.get('modal').style.display = 'none';
    trigger.innerHTML = 'reopen';
    trigger.setAttribute('data-is-open', 'false');
  }
});

function playSound(url) {
  const audio = document.createElement('audio');
  audio.src = url;
  // Your audio settings
  audio.play();
}

 #modalContainer {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#modal {
  display: none;
  width: 50px;
  margin-bottom: 1rem;
  padding: .5rem;
  border: 1px solid;
  border-radius: 4px;
  z-index: 1000;
}

#trigger {
  float: right;
}

 <html>
  <body>
    <div id="modalContainer">
      <div id="modal">
        This is the Modal
      </div>
      <button id="trigger" data-is-open="false">open</button>
     </div>
  </body>
</html>

Ответ №2:

Вы имеете в виду что-то вроде этого?

 // Some shorthands
const $ = document;
$.get = $.getElementById;
const log = console.log;
const warn = console.warn;
const error = console.error;

$.body.addEventListener('click', function() {
  $.get('trigger').addEventListener('click', function() {
    $.get('overlay').style.display = 'block';
    $.get('modal').style.display = 'block';
    playSound('https://intern.globallabs.de/message.mp3');
  });
});

function playSound(url) {
  const audio = document.createElement('audio');
  audio.src = url;
  // Your audio settings
  audio.play();
}

 #overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #0008;
  z-index: 50;
}

#modal {
  display: none;
  width: 50%;
  margin: 2rem auto;
  padding: .5rem;
  border: 1px solid;
  border-radius: 4px;
  z-index: 1000;
}

 <html>
  <body>
    Click the button to <button id="trigger">open</button> the Modal and play the sound.
    <div id="overlay"></div>
    <div id="modal">
      This is the Modal
    </div>
  </body>
</html>

1. На самом деле нет. Вы можете увидеть это здесь: peymanwebsite . webflow.io . Желтый переключатель внизу справа. Если он открыт, открывается модальность и появляется звук. Но когда я закрываю его, звук появляется снова. Он должен появляться только при открытии.