禁止音频在锁定屏幕后继续播放或在Safari中按下Home按钮是一种常见的需求,可以通过以下方式实现:
AudioContext
对象创建音频上下文。Audio
对象加载音频资源。AudioContext
对象的suspend()
方法在需要停止音频播放时暂停音频上下文。AudioContext
对象的resume()
方法在需要恢复音频播放时恢复音频上下文。示例代码如下:
// 创建音频上下文
const audioContext = new AudioContext();
// 加载音频资源
const audio = new Audio('audio.mp3');
// 播放音频
audio.play();
// 监听设备状态变化
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
// 锁定屏幕或按下Home按钮时暂停音频上下文
audioContext.suspend();
} else {
// 恢复音频上下文
audioContext.resume();
}
});
<audio>
元素:HTML5的<audio>
元素提供了内置的控制音频播放的功能。可以通过设置controls
属性和监听pause
事件来实现在锁定屏幕或按下Home按钮时停止音频播放。具体实现步骤如下:<audio>
元素,并设置controls
属性以显示音频控制面板。pause
事件,在事件回调函数中停止音频播放。示例代码如下:
<audio src="audio.mp3" controls></audio>
<script>
const audio = document.querySelector('audio');
audio.addEventListener('pause', () => {
// 锁定屏幕或按下Home按钮时停止音频播放
audio.pause();
});
</script>
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云