Остановка / приостановка звука при закрытии окна на сенсорном экране

ProgramBox

Остановка / приостановка звука при закрытии окна на сенсорном экране

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css #html5-audio

#javascript #HTML #css #html5-аудио

Вопрос:

Мне трудно понять, как я могу остановить / приостановить воспроизведение аудиофайла, когда пользователь нажимает на другую ссылку или закрывает всплывающее окно.

На данный момент пользователю всегда приходится нажимать кнопку паузы, чтобы остановить звук.

Я пытался добавить stop() и pause() в JavaScript, но безуспешно.

Это то, что у меня есть до сих пор:

 document.addEventListener('click', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;

  if (target.hasAttribute('data-toggle') amp;amp; target.getAttribute('data-toggle') == 'modal') {
    if (target.hasAttribute('data-target')) {
      var m_ID = target.getAttribute('data-target');
      document.getElementById(m_ID).classList.add('open');

      e.preventDefault();
    }
  }

  if ((target.hasAttribute('data-dismiss') amp;amp; target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
    var modal = document.querySelector('[class="modal open"]');
    modal.classList.remove('open');

    e.preventDefault();

  }
}, false);

 .modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.modal-window {
  position: relative;
  background-color: rgba(250, 250, 250, .9);
  width: 30%;
  margin: 10% auto;
  padding: 20px;
  color: #000;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-text {
  color: #000;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 30px;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
}

.close:hover, .close:focus {
  color: #000000;
  cursor: pointer;
}

.open {
  display: block;
}

#player {
  color: red;
}

 <div class="columns">
    <div class="col-left">
        <ul>
            <li data-target="modal_1" data-toggle="modal"> Modal1 <span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_2" data-toggle="modal"> Modal2 <span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_3" data-toggle="modal"> Modal3 <span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_4" data-toggle="modal">Modal4<span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_5" data-toggle="modal">Modal5 <span class="headp"><img src="img/headp.svg" height='22px'/></li>
        </ul>
    </div>
    <div class="col-right">
        <ul>
            <li data-target="modal_6" data-toggle="modal">Modal6<span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_7" data-toggle="modal">Modal7 <span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_8" data-toggle="modal">Modal8<span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_9" data-toggle="modal">Modal9<span class="headp"><img src="img/headp.svg" height='22px'/></li>
            <li data-target="modal_10" data-toggle="modal">Modal10<span class="headp"><img src="img/headp.svg" height='22px'/></li>
        </ul>
    </div>
</div>

<!-- The Modal -->
<div id="modal_1" class="modal">

    <!-- Modal content -->
    <div class="modal-window">
        <span class="close" data-dismiss="modal">amp;times;</span>
        <p>Audiofile name</p>
        <audio id="player" controls>
            <source src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
        </audio>
    </div>
</div>

Ответ №1:

Просто используйте pause() функцию (смотрите ее в W3schools). Вы могли бы даже автоматически воспроизводить звук при открытии модального режима (хотя я советую вам этого не делать, поскольку всегда лучше заранее предупредить пользователя).

Получите свой элемент по его идентификатору ( #player здесь) и установите его в pause()

 document.addEventListener('click', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    // getting the player ID
    var player = document.querySelector("#player");

    if (target.hasAttribute('data-toggle') amp;amp; target.getAttribute('data-toggle') == 'modal') {
        if (target.hasAttribute('data-target')) {
            var m_ID = target.getAttribute('data-target');
            document.getElementById(m_ID).classList.add('open');

            e.preventDefault();
        }
    }

    if ((target.hasAttribute('data-dismiss') amp;amp; target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
        var modal = document.querySelector('[class="modal open"]');
        modal.classList.remove('open');
        
        // pause on modal closing
        player.pause();
        
        e.preventDefault();

    }
}, false);

 /********** The Modal *********/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;

}

.modal-window {
    position: relative;
      background-color: rgba(250,250,250,.9);
    width: 30%;
    margin: 10% auto;
    padding: 20px;
    color: #000;
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
    border-radius: 5px;
}


/****close button ****/

.close{
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-text{
  color: #000;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

.close:hover,
.close:focus {
    color: #000000;
    cursor: pointer;
}

.open {
    display: block;
}


#player{
  color: red;
}

 <div class="columns">
    <div class="col-left">
        <ul>
            <li data-target="modal_1" data-toggle="modal">Modal1 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_2" data-toggle="modal">Modal2 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_3" data-toggle="modal">Modal3 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_4" data-toggle="modal">Modal4 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_5" data-toggle="modal">Modal5 <span classa="headp"><img src="img/headp.svg" height= '22px'/></span></li>
        </ul>
    </div>
    <div class="col-right">
        <ul>
            <li data-target="modal_6" data-toggle="modal">Modal6 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_7" data-toggle="modal">Modal7 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_8" data-toggle="modal">Modal8 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_9" data-toggle="modal">Modal9 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
            <li data-target="modal_10" data-toggle="modal">Modal10 <span class="headp"><img src="img/headp.svg" height= '22px'/></span></li>
        </ul>
    </div>
</div>

<!-- The Modal -->

<div id="modal_1" class="modal">

    <!-- Modal content -->
    <div class="modal-window">
        <span class="close" data-dismiss="modal">amp;times;</span>
        <p>Audiofile name</p>
        <audio id="player" controls>
            <source src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
        </audio>
    </div>
</div>

Ответ №2:

Javascript не предлагает метод .stop() для элемента audio. К счастью, есть метод .pause(). Все, что вам нужно сделать, это получить ссылку на ваш элемент аудиоплеера и указать ему на паузу.

 document.getElementById("player").pause();

Вот рабочий пример:

 document.addEventListener('click', function(e) {
      e = e || window.event;
      var target = e.target || e.srcElement;

      if (target.hasAttribute('data-toggle') amp;amp; target.getAttribute('data-toggle') == 'modal') {
        if (target.hasAttribute('data-target')) {
          var m_ID = target.getAttribute('data-target');
          document.getElementById(m_ID).classList.add('open');

          e.preventDefault();
        }
      }

      if ((target.hasAttribute('data-dismiss') amp;amp; target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
        var modal = document.querySelector('[class="modal open"]');
        modal.classList.remove('open');
        modal.getElementsByTagName("audio")[0].pause();
        e.preventDefault();

      }
    }, false);

 .modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.modal-window {
  position: relative;
  background-color: rgba(250, 250, 250, .9);
  width: 30%;
  margin: 10% auto;
  padding: 20px;
  color: #000;
  font-weight: bold;
  font-size: 1.3em;
  text-align: center;
  border-radius: 5px;
}

/****close button ****/

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-text {
  color: #000;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 30px;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
}

.close:hover,
.close:focus {
  color: #000000;
  cursor: pointer;
}

.open {
  display: block;
}

#player {
  color: red;
}

 <div class="columns">
  <div class="col-left">
    <li data-target="modal_1" data-toggle="modal"> Modal1 <span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_2" data-toggle="modal"> Modal2 <span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_3" data-toggle="modal"> Modal3 <span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_4" data-toggle="modal">Modal4<span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_5" data-toggle="modal">Modal5 <span class="headp"><img src="img/headp.svg" height= '22px'/></li>
      </div>

      <div class="col-right">
        <li data-target="modal_6" data-toggle="modal">Modal6<span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_7" data-toggle="modal">Modal7 <span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_8" data-toggle="modal">Modal8<span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_9" data-toggle="modal">Modal9<span class="headp"><img src="img/headp.svg" height= '22px'/></li>
        <li data-target="modal_10" data-toggle="modal">Modal10<span class="headp"><img src="img/headp.svg" height= '22px'/></li>
      </div>
</div>
    </div>

    <!-- The Modal -->


    <div id="modal_1" class="modal">

      <!-- Modal content -->
          <div class="modal-window">
        <span class="close" data-dismiss="modal">amp;times;</span>
      <p> Audiofile name</p>
      <audio id="player_modal_1" controls>
          <source src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Glade_jul,_dejlige_jul.ogg" type="audio/mpeg">

        </audio>
  </div>

</div>

1. спасибо, но, похоже, это работает только для первого аудиоклипа.

2. var m_ID = target.getAttribute('data-target'); «преобразует» атрибут data.target в HTML-элемент, к которому вы пытаетесь получить доступ позже, используя: document.getElementById(m_ID).classList.add('open'); К сожалению, у вас есть только один DIV с идентификатором modal_1 ( <div id="modal_1" class="modal"> ), поэтому для остальных это не удается (modal_2 modal_3 …).

3. Я не уверен, могу ли я дать вам совет здесь, потому что я не знаю, чего вы хотите достичь. Одним из простых решений было бы добавление других пустых DIVS с идентификаторами modal_2 modal_3.

4. У меня есть другие модалы с идентификаторами modal _2, modal_3, modal_4 и т.д. у всех них есть звуковые клипы, которые witch продолжает воспроизводить, если модальное окно закрыто, за исключением первого модального. Я бы хотел, чтобы другие модальности прекращали воспроизведение звуковых клипов, когда пользователь их закрывает.

5. Думаю, теперь я понимаю, что вы имеете в виду. В других ваших DIVS (modal_2 modal_3 …) наверняка есть другой аудиоэлемент внутри. Присвойте ему уникальный идентификатор, подобный <audio id="player_modal_2" controls> для modal_2, и измените document.getElementById("player").pause(); на modal.getElementsByTagName("audio")[0].pause(); Я изменил свой пример выше, чтобы отразить эти изменения.