vue3如何点击图标播放音乐

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

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

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

2. 在 template 中，你可以使用 `<i>` 标签作为图标，并添加一个点击事件来触发播放音乐。

<template>
  <div>
    <i class="icon" @click="playMusic"></i>
  </div>
</template>

3. 在 script 中，你可以定义一个 `playMusic` 方法来播放音乐。

<script>
export default {
  methods: {
    playMusic() {
      const audio = new Audio(audioFile);
      audio.play();
    },
  },
};
</script>

这样，当用户点击图标时，音乐将开始播放。

相关问题

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>

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

vue3 实现音乐播放

要实现音乐播放，可以使用 HTML5 的 audio 标签，同时结合 Vue3 的响应式数据和生命周期函数来控制音乐的播放、暂停、进度等。

首先，在 Vue3 的 setup 函数中定义一个响应式数据，用于存储音乐的播放状态、当前播放时间和总时长：

import { ref } from 'vue'

export default {
  setup() {
    const audio = ref(null) // audio 元素
    const isPlaying = ref(false) // 播放状态
    const currentTime = ref(0) // 当前播放时间
    const duration = ref(0) // 总时长

    // 监听 audio 元素的事件
    const onAudioPlay = () => {
      isPlaying.value = true
    }
    const onAudioPause = () => {
      isPlaying.value = false
    }
    const onAudioTimeUpdate = () => {
      currentTime.value = audio.value.currentTime
      duration.value = audio.value.duration
    }

    return {
      audio,
      isPlaying,
      currentTime,
      duration,
      onAudioPlay,
      onAudioPause,
      onAudioTimeUpdate
    }
  }
}

然后，在模板中使用 audio 标签，并绑定相关事件和数据：

<template>
  <div>
    <audio ref="audio" @play="onAudioPlay" @pause="onAudioPause" @timeupdate="onAudioTimeUpdate">
      <source src="music.mp3" type="audio/mpeg">
    </audio>
    <button @click="isPlaying ? audio.pause() : audio.play()">
      {{ isPlaying ? '暂停' : '播放' }}
    </button>
    <div>
      {{ currentTime }} / {{ duration }}
    </div>
  </div>
</template>

最后，在组件的 mounted 生命周期中获取 audio 元素，并调用 play 方法开始播放音乐：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const audio = ref(null)
    // ...

    onMounted(() => {
      audio.value.play()
    })

    return {
      audio,
      // ...
    }
  }
}