在移动端播放音频时 回到桌面时让音频暂停 回到浏览器继续播放 怎么做(vue中)

最近在做一个网页上播放音乐的组件 但是在浏览器中播放 回到桌面时还在继续播放 这问题怎么解决
下面是我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>`### 问题描述

问题出现的环境背景及自己尝试过哪些方法

  1. iphone自带浏览器
  2. 微信链接打开地址
  3. qq链接

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
`destroyed() {

this.$refs.music.stopPlay()
// this.openMusic = false

}`

在组件销毁前暂停播放

你期待的结果是什么?实际看到的错误信息又是什么?

已解决 悬赏分:50 - 解决时间 2021-11-28 03:09
反对 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