在触摸屏上关闭窗口时停止/暂停音频

时间：2019-04-23 11:12:12

标签： javascript html css html5-audio

当用户按下另一个链接或关闭弹出窗口时，我很难确定如何停止/暂停正在播放的音频文件。

就目前而言，用户始终必须按下暂停按钮才能停止音频。

我尝试将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 :(得分：0)

只需使用pause()函数（请参见W3schools）。您甚至可以在模式打开时自动播放音频（尽管我建议您不要这样做，因为事先警告用户总是更好的选择。）

通过其ID（此处为#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>

答案 1 :(得分：0)

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>

相关问题
最新问题