Остановить / приостановить звук при закрытии окна на сенсорном экране - PullRequest
Новая
       21

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

0 голосов
/ 23 апреля 2019

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

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

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

Это то, что я имею до сих пор: 

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

  if (target.hasAttribute('data-toggle') && 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') && 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">&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 ]

0 голосов
/ 23 апреля 2019

Javascript не предлагает метод .stop () для аудиоэлемента.К счастью, есть метод .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') && 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') && 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">&times;</span>
      <p> Audiofile name</p>
      <audio id="player_modal_1" controls>
          <source src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Glade_jul%2C_dejlige_jul.ogg" type="audio/mpeg">

        </audio>
  </div>

</div>
0 голосов
/ 23 апреля 2019

Просто используйте функцию 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') && 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') && 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">&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>
...