vue3 音乐播放器

以下是一个基于Vue3的简单音乐播放器的示例：

<template>
  <div>
    <audio ref="audioPlayer" :src="currentSong.url" @timeupdate="handleTimeUpdate"></audio>
    <div>{{ currentSong.name }}</div>
    <div>{{ currentTime }} / {{ duration }}</div>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <input type="range" min="0" :max="duration" v-model="currentTime" @input="handleSeek">
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  data() {
    return {
      currentSong: {
        name: '歌曲名称',
        url: '歌曲链接'
      },
      currentTime: 0,
      duration: 0
    };
  },
  mounted() {
    this.$refs.audioPlayer.addEventListener('loadedmetadata', () => {
      this.duration = this.$refs.audioPlayer.duration;
    });
  },
  methods: {
    play() {
      this.$refs.audioPlayer.play();
    },
    pause() {
      this.$refs.audioPlayer.pause();
    },
    handleTimeUpdate() {
      this.currentTime = this.$refs.audioPlayer.currentTime;
    },
    handleSeek() {
      this.$refs.audioPlayer.currentTime = this.currentTime;
    }
  }
};
</script>

这个示例中，我们使用了Vue3的`ref`和`watch`函数来实现音乐播放器的功能。通过`<audio>`标签来播放音乐，使用`ref`引用获取`<audio>`元素，然后监听`timeupdate`事件来更新当前播放时间。我们还使用了`<input type="range">`来实现进度条的拖拽快进和快退功能。