用于在引导模式窗口中关闭音频的jquery

时间:2017-06-18 15:50:07

标签: jquery audio twitter-bootstrap-3

我在bootstrap模式窗口中有一个音频文件,当我关闭窗口时音频不会停止。我还有另一个模态的YouTube视频,让它停止通过jquery播放。我对音频应用了相同的方法,但它不起作用。任何帮助都表示赞赏,因为我已经为此工作了3天以上。这是我的代码: Bootstrap模式中的音频:

<!-- Ornithology -->
<div class="modal fade" id="modal-ornithology" role="dialog">
 <div class="modal-dialog modal-sm-audio">
  <div class="modal-content-audio">
    <div class="modal-header-audio">
      <button type="button" class="close audio-off" data-
        dismiss="modal">&times;</button>
      <h4 class="modal-title audio-title">Ornithology</h4>
    </div>    
      <div class="modal-body">
        <img class="center" src="static/img/strings.jpg"/>
        <br>
          <ul>
          <br>
            <li>Mandy Flowers - Acoustic Bass</li>
            <li>Alex Murzyn - Sax</li>
            <li>Art Khu- Piano</li>
            <li>Alex Aspinall- Drums</li>
          </ul>
        <audio controls>
          <source class="audio-clips" 
          src="http://mandyflowers.com/sound_clips/ornithology.mp3" 
          type="audio/mpeg" />
          Your browser does not support the audio tag.
        </audio>            
      </div>
      <div class="modal-footer-audio">
        <button type="button" class="btn btn-default audio-off" data-
         dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


jQuery 
// Turns off audio when modal window is closed
$('.audio-off').on('click', function(){
    var audio = $('.audio-clips').attr('src');
      $('.audio-clips').attr('src','');
      $('.audio-clips').attr('src', audio);
    }
  )

1 个答案:

答案 0 :(得分:0)

你可以尝试:

var $audio = document.querySelectorAll('.audio-clips');

for (var i = 0; i < $audio.length; i++) {
    var $el = $audio[i];
    $el.pause();
}

这应该获取所有音频元素并暂停它们。