vue3如何点击图标播放音乐暂停音乐

要实现在 Vue3 中点击图标播放音乐并且暂停音乐，你可以按照以下步骤操作：

1. 首先，你需要在 Vue3 中引入音频文件。

import audioFile from "@/assets/audio/music.mp3";

2. 在 template 中，你可以使用 `<i>` 标签作为图标，并添加一个点击事件来触发播放音乐，并通过 `v-if` 来控制是否显示暂停图标。

<template>
  <div>
    <i class="icon" v-if="!isPlaying" @click="playMusic"></i>
    <i class="icon" v-else @click="pauseMusic"></i>
  </div>
</template>

3. 在 script 中，你可以定义 `isPlaying` 数据来控制是否正在播放音乐，并定义 `playMusic` 和 `pauseMusic` 方法来播放和暂停音乐。

<script>
export default {
  data() {
    return {
      isPlaying: false,
      audio: null,
    };
  },
  methods: {
    playMusic() {
      this.audio = new Audio(audioFile);
      this.audio.play();
      this.isPlaying = true;
    },
    pauseMusic() {
      this.audio.pause();
      this.isPlaying = false;
    },
  },
};
</script>

这样，当用户点击图标时，音乐将开始播放，同时图标会变成暂停图标。当用户再次点击暂停图标时，音乐将暂停，同时图标会变成播放图标。