如何暂停HTML音频IF div显示:none

Question

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

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

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

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>