微信小程序退出，web-view里h5音乐继续播放问题解决

最新推荐文章于 2025-04-03 20:45:00 发布

jiahao778

最新推荐文章于 2025-04-03 20:45:00 发布

阅读量1.4k

点赞数

文章标签：小程序 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_39639298/article/details/116780690

版权

本文探讨了在小程序中处理webview与小程序页面切换时音乐播放的问题。通过监听visibilitychange事件，可以判断页面是否可见，从而决定是否暂停或播放背景音乐。在安卓和iOS设备上，此方法都能实现播放控制。总结了如何根据document.visibilityState和document.hidden属性来控制音乐播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说结论，那就是通过监听visibilitychange事件

这个问题，首先看你的需求是不是要在页面切换的时候停止播放，对我们的项目来说，播放的是对景点的详情解说，由于景点的文字解说在小程序页面，所以当webview里面的音乐播放的时候，用户从webview返回到小程序页面时，不希望播放的解说停止，所以我们对这个不作处理。

不过，刚开始也找了解决方案，经过测试，安卓，ios都可以实现对播放的停止。

visibilitychange事件:当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

可以通过判断document.visibilityState 是否为 ‘visible’ 或者判断document.hidden是否为true去判断当前页面是否被隐藏