vue页面添加背景音乐

在Vue.js中添加背景音乐通常涉及到HTML、CSS以及JavaScript部分。首先，你需要将音频文件放在项目资源文件夹下，如`static`目录。

1. HTML部分:
在需要播放音乐的某个组件模板里，添加一个`audio`标签：

<audio id="backgroundMusic" src="@/assets/music.mp3"></audio>

这里的`src`属性引用了音频文件的路径，`@/assets`表示静态资源文件夹，`music.mp3`是音频文件名。

2. JavaScript部分 (推荐使用`v-model`绑定):
使用Vue的`data`选项声明一个变量来控制音乐的状态：

export default {
  data() {
    return {
      audioPlaying: false,
    };
  },
};

然后，在`mounted`生命周期钩子函数中初始化并开始播放音乐：

mounted() {
  this.audio = document.getElementById('backgroundMusic');
  this.audio.src = require('@/assets/music.mp3'); // 使用Webpack的require函数处理路径
  this.playMusic();
},
methods: {
  playMusic() {
    if (!this.audioPlaying) {
      this.audio.play();
      this.audioPlaying = true;
    }
  },
  pauseMusic() {
    if (this.audioPlaying) {
      this.audio.pause();
      this.audioPlaying = false;
    }
  },
  stopMusic() {
    this.audio.pause();
    this.audio.currentTime = 0; // 如果需要重置进度
    this.audioPlaying = false;
  },
},
// 添加暂停和停止按钮的行为
...