vue的keep-alive，后台播放音乐？

vue的keep-alive，是否能做到后台播放音视乐？

答案当然是不能。

因为处于失活状态的组件，其真实dom已经从页面移除了，只将其存放到了内存中。

dom都不存在了，还播放啥。

能做什么？

顶多能做到“回到这个页面的时候，我还能做到继续从之前的位置自动播放”

<template>
  <div class="home">
    <audio
      ref="myAudio"
      controls
      @play="onPlay"
      @pause="onPause"
      src="https://dshvv-1300009960.cos.ap-beijing.myqcloud.com/aegis/xby.mp3"
    ></audio>
  </div>
</template>

<script setup>
import { onActivated, onDeactivated, ref } from "vue";

const myAudio = ref(null); // 音频dom
const auStatus = ref(false); // 记录离开页面时候音频播放状态
const cmpLiveStatus = ref(true); // 当前页面live状态

// 播放回调
const onPlay = () => {
  auStatus.value = true;
}

// 暂停回调
const onPause = () => {
  if (cmpLiveStatus.value) {
    auStatus.value = false
  }
}

// 回到页面的时候，如果音频上次是播放状态，则自动续播
onActivated(() => {
  console.log("激活了", auStatus.value);
  cmpLiveStatus.value = true;
  if (auStatus.value) {
    myAudio.value.play();
  }
});

onDeactivated(() => {
  console.log("失活了");
  cmpLiveStatus.value = false;
})
</script>