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

Question

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

至于现在，用户总是需要点击暂停按钮来停止音频。

我曾尝试将 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>

Answer 1

只需使用 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>