vue3+uniapp做个音乐播放的组件不会随着页面切换停止 全局展示

在 Vue3 和 UniApp 开发中，如果你想要创建一个全局显示并且在页面切换时仍保持音乐播放状态的音乐播放组件，你可以按照以下步骤操作：

1. **设置状态管理**: 使用 Vuex 或者 MobX 这样的状态管理库来保存音频的状态。在 store 中声明一个表示当前是否正在播放的布尔值。

// Vuex 示例
import { createStore } from 'vuex';

const store = createStore({
  state: {
    isPlaying: false,
  },
  mutations: {
    togglePlay(state) {
      state.isPlaying = !state.isPlaying;
    },
  },
});

2. **创建音频组件**: 在组件中，通过 `store` 访问音频的状态，并监听组件的生命周期钩子（如 `beforeRouteUpdate` 或者自定义事件）来更新播放状态。

<template>
  <audio :src="audioSrc" @play="togglePlay" @pause="togglePlay">
    <!-- 播放按钮或其他控制元素 -->
  </audio>
</template>

<script setup>
import { ref, onMounted, onBeforeRouteUpdate } from 'vue';
import { useStore } from '@/store';

const audioSrc = ref('');
const store = useStore();

onMounted(() => {
  // 初始化音频源
  audioSrc.value = 'your_audio_source';
});

function togglePlay() {
  store.commit('togglePlay');
}

onBeforeRouteUpdate(to, from, next) {
  if (from.fullPath !== to.fullPath) {
    // 页面切换前暂停
    if (store.state.isPlaying) {
      audio.pause();
    }
    // 页面切换后恢复播放（如果需要）
    next();
  }
}
</script>

3. **全局播放**: 如果你想在整个应用中都使用这个组件，确保你在需要播放音乐的地方导入并挂载它，比如 App.vue 或者某个父组件。

**注意事项**:
- 需要考虑用户交互（例如点击其他区域关闭音乐），以及音频自动播放权限的问题。
- 跨域问题也需要处理，确保音频文件来源合法。