vue3 播放背景音乐

### 实现 Vue3 背景音乐播放功能

为了实现在 Vue3 应用程序中添加和控制背景音乐播放，可以采用如下方式：

#### 创建音频组件 `BackgroundAudio`

通过创建一个专门处理音频逻辑的子组件来管理音乐播放状态。此组件负责初始化 `<audio>` 元素以及提供基本的操作接口。

// src/components/BackgroundAudio.vue
<template>
  <audio ref="audioRef" :src="musicSrc"></audio>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  musicSrc: String,
});

const audioRef = ref(null);

defineExpose({ play, pause });

function play() {
  if (audioRef.value) {
    audioRef.value.play();
  }
}

function pause() {
  if (audioRef.value) {
    audioRef.value.pause();
  }
}
</script>

#### 注册全局事件监听器

为了让整个应用都能感知到用户的交互行为从而触发音乐播放，在入口文件(main.js 或 main.ts)里设置全局点击事件监听器[^2]。

// src/main.js or src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import BackgroundAudio from './components/BackgroundAudio.vue';

let appInstance;

createApp(App).use((app) => {
  const backgroundAudioComponent = new BackgroundAudio();

  document.addEventListener('click', () => {
    // 首次点击时尝试播放音乐
    !backgroundAudioComponent.isPlaying && backgroundAudioComponent.play();
  });
}).mount('#app');

需要注意的是 iOS 设备上由于浏览器策略原因无法直接使用 autoplay 属性启动声音媒体流，因此需要借助用户操作（如点击）作为起点去激活音轨播放[^3]。

#### 控制音乐图标显示与隐藏

对于是否展示音乐控件的问题，则可以根据路由变化动态调整其可见性。当处于特定页面(比如主页)，则隐藏这些按钮；而在其他地方允许用户看到并操控它们。

<!-- src/views/HomeView.vue -->
<template>
  <div class="home">
    <!-- 主页内容... -->

    <!-- 只有不在首页才渲染音乐控制器 -->
    <router-view v-if="$route.name !== 'Home'" />
    
    <button @click="togglePlayPause">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { inject } from 'vue';

const route = useRoute();
const backgroundAudio = inject('backgroundAudio');

const isPlaying = computed(() => /* ... */);
</script>

以上就是关于如何在 Vue3 中实现跨页面持续播放背景音乐的方法概述[^1]。