站长
    首页 > 知道 > 站长 > 前端问题 > 正文

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

发布于 2021-11-27 07:23 分类：推广求助
最近在做一个网页上播放音乐的组件 但是在浏览器中播放 回到桌面时还在继续播放 这问题怎么解决
下面是我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

最佳
  • @
    @siman

    用原生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