如何暂停 HTML Audio IF div is display: none？答案

【问题标题】：How do I pause a HTML Audio IF div is display: none?如何暂停 HTML Audio IF div is display: none？
【发布时间】：2020-07-21 13:32:30
【问题描述】：

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

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

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

【问题讨论】：

最好不要为移动设备添加音频元素，这样音频就永远不会加载。这不是你的选择吗？
显然，无论我是否将其设置为在移动设备上隐藏，标题都会加载。

标签： javascript html jquery dom

【解决方案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>

【讨论】：