vue实现点击按钮发出警报声

Vue的音乐文件夹叫做assets，assets文件夹在Vue项目的根目录下。assets文件夹用于存放项目中使用的静态资源文件，包括图片、音乐、视频等。在assets文件夹中，可以创建一个单独的文件夹用于存放音乐文件，命名可根据需要自定义，一般而言命名为music或audio。

音频文件：在这里免费下载   https://sc.chinaz.com/tag_yinxiao/tixing.html

在Vue项目中使用音乐文件时，可以在对应的组件中引入音乐文件。例如，假设在项目的home组件中使用音乐文件，可以在home.vue文件中的script标签中引入音乐文件，代码如下：

<el-button
                type="primary"
                size="mini"
                class="ele-btn-icon"
                @click="simulateError()"
              >
                模拟错误（播放）
              </el-button>
              <el-button
                type="primary"
                size="mini"
                class="ele-btn-icon"
                @click="pauseAudio()"
              >
                暂停
              </el-button>
              <el-button
                type="primary"
                size="mini"
                class="ele-btn-icon"
                @click="stopAudio()"
              >
                停止
              </el-button>

使用JavaScript的Audio对象：在前端开发中，可以使用JavaScript的Audio对象来播放音频文件。

data() {
    return {
      bgMusic: require('@/assets/music/6201.mp3'),
      audio: ''
    };
  },

要暂停或停止正在播放的音频文件，可以使用pause()方法来暂停音频的播放，使用currentTime属性将当前播放时间设置为0来停止音频的播放。

methods: {
    simulateError() {
      this.playErrorSound();
      // 模拟错误处理逻辑
      console.error('发生错误！');
    },
    playErrorSound() {
      // 播放背景音乐代码
      this.audio = new Audio();
      this.audio.src = this.bgMusic;
      this.audio.loop = true;
      this.audio.play();
    },
    // 暂停
    pauseAudio() {
      this.audio.pause();
    },
    // 停止
    stopAudio() {
      this.audio.pause();
      this.audio.currentTime = 0;
    }
}

参考：

https://worktile.com/kb/ask/787442.html

https://cloud.tencent.com/developer/information/%E5%A6%82%E4%BD%95%E6%9A%82%E5%81%9C%E6%88%96%E5%81%9C%E6%AD%A2%E6%AD%A3%E5%9C%A8%E6%92%AD%E6%94%BE%E7%9A%84%E9%9F%B3%E9%A2%91%E6%96%87%E4%BB%B6-article