uniapp 全局播放背景音乐

UniApp 是一个基于 Vue.js 的跨平台开发框架，它可以让你编写一次代码，同时适应多个平台，如微信小程序、H5、支付宝小程序等。在 UniApp 中，如果你想实现在全局设置一个背景音乐并自动播放，你可以使用 Vue 的生命周期钩子和 Vue 的音频组件。

以下是一个简单的示例，展示如何在 UniApp 中全局设置并播放背景音乐：

<template>
  <view class="global-music">
    <!-- 此处的音乐播放控件会被隐藏 -->
    <audio ref="backgroundMusic" :src="musicSrc" autoplay="autoplay" hidden></audio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      musicSrc: 'path/to/your/musical/song.mp3', // 替换为你的音乐文件路径
    };
  },
  mounted() {
    // 在页面挂载后开始播放音乐
    this.$refs.backgroundMusic.play();
  },
  beforeDestroy() {
    // 在页面卸载前停止播放，防止内存泄露
    this.$refs.backgroundMusic.pause();
    this.$refs.backgroundMusic.currentTime = 0;
  },
};
</script>

在这个例子中：
- `<audio>` 标签用来创建音频元素，`autoplay` 属性使得音乐自动播放。
- `mounted` 生命周期钩子会在页面挂载后执行，调用 `play()` 方法开始播放音乐。
- `beforeDestroy` 钩子在页面即将卸载时执行，`pause()` 方法停止播放，并将时间点重置到0，这样下次页面加载时不会从上次暂停的地方继续播放。