最近在做一个网页上播放音乐的组件 但是在浏览器中播放 回到桌面时还在继续播放 这问题怎么解决
下面是我vue中写的代码
`<template>
<div class="music-main"> <!-- 播放音乐的提示 -->
<div class="tips" v-if="showtips && tipTitle.length !== 0">{{tipTitle}}</div>
<div class="music-box">
<div class="music-container" :class="[stopRotate ? 'rotate' : '']">
<!-- 暂停音乐时候的暂停标识 --> <div :class="[stop ? '' : 'line']"></div> <audio id="audioDetail" :src="audioSrc" loop> <source :src="audioSrc" type="audio/mp3"> <source :src="audioSrc" type="audio/wav"> <source :src="audioSrc" type="audio/ogg"> <object :data="audioSrc"> <embed :src="audioSrc" /> </object> </audio>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CMusic', props: { // 音乐路径 通过父组件传递 audioSrc: { type: String, default: 'https://down-files.2bulu.com/f/d1?downParams=kAgzw+ovAosKBLYt1Quxlw==' }, tipTitle: { type: String, default: '' }, showtips: { type: Boolean, default: true }, stop: { type: Boolean, default: true }, stopRotate: { type: Boolean, default: false } }, methods: { // 暂停 stopPlay () { let audio = document.getElementById('audioDetail') audio.pause() }, // 播放 async payPause () { let audio = document.getElementById('audioDetail') audio.play() } }
}
</script>`### 问题描述
问题出现的环境背景及自己尝试过哪些方法
- iphone自带浏览器
- 微信链接打开地址
- qq链接
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
`destroyed() {
this.$refs.music.stopPlay() // this.openMusic = false
}`
在组件销毁前暂停播放
你期待的结果是什么?实际看到的错误信息又是什么?
已解决
悬赏分:50
- 解决时间 2021-11-28 03:09
点赞 0反对 0举报 0
收藏 0
分享 0
回答1
最佳
-
用原生js试试,这些知识也是无意中看到的,你可以试试,行不行我也没试过0.0:
写vue不要被vue的风格局限,在vue中也可以用document操作dom,也可以写原生js,在必要的时候还是得用而且很好用。传统的页面监听方式有:pagehide、beforeunload、unload
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
浏览器提供了一个更可靠的方法:
document.visibilityState有三个值:
- hidden:页面彻底不可见。
- visible:页面至少一部分可见。
- prerender:页面即将或正在渲染,处于不可见状态。
当visibilityState的值放生变化的时候会触发visibilitychange事件:
`document.addEventListener('visibilitychange', function () {// 用户离开了当前页面 if (document.visibilityState === 'hidden') { document.title = '页面不可见'; } // 用户打开或回到页面 if (document.visibilityState === 'visible') { document.title = '页面可见'; } });`
支持 0 反对 0 举报2021-11-27 07:59