javascript - 如何暂停 HTML 音频 IF div is display: none？

Question

我在标题中有一个音频文件：

<audio controls autoplay> 
                         <source src="###" type="audio/ogg" />
                         <source src="###" type="audio/mpeg" />
                        </audio>

这是在桌面和平板电脑可见的 DIV 中，但在移动设备上隐藏。显然，即使我将它设置为不显示，并且无论播放器不可见，该 div 也会在移动设备上播放音频。如何确保在隐藏 div 时音频不会开始播放，并且在相同 div 显示的桌面上，音频会继续播放？

标签： javascripthtmljquerydom

Answer 1

在隐藏 div 时调用 pause 函数应该可以解决问题。

var wrapper = document.querySelector('#yourdiv');
var styles = window.getComputedStyle(wrapper);

if(styles.getPropertyValue('visibility') === 'hidden') {
  console.log('pausing');
  wrapper.querySelector('audio').pause();
}

#yourdiv {
  visibility: hidden;
}

<div id='yourdiv'>
  hidden
  <audio></audio>
</div>