vue3 音乐播放器组件

Vue3 中的音乐播放器组件通常是一个功能丰富的自组件，用于管理音频播放、暂停、下一首、上一首等交互操作。它可能会包含以下几个部分：

1. **音频元素**：`<audio>` 元素用于加载和播放音频文件。
2. **控制按钮**：如播放/暂停按钮（play/pause）、前进/后退按钮（forward/backward）、音量调节滑块以及全屏/退出全屏切换。
3. **进度条**：显示当前播放时间和总时间，用户可以拖动调整播放位置。
4. **歌曲信息展示**：包括歌曲标题、艺术家等基本信息，可以动态更新。
5. **状态管理**：通过Vuex 或者自定义的方式管理播放器的状态，如播放模式、是否正在播放等。

在 Vue3 中创建这样的组件，你可以使用 Composition API 或者 Options API。例如，使用 Composition API，可以这样设计：

<template>
  <div class="music-player">
    <!-- 控制区域 -->
    <button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
    <slider v-model="volume" />
    
    <!-- 进度条和时间显示 -->
    <progress :value="currentProgress" :max="totalDuration"></progress>
    <span>已播放: {{ currentTime }} / 总长度: {{ totalDuration }}</span>

    <!-- 歌曲信息 -->
    <h3>{{ songTitle }}</h3>
    <p>艺术家: {{ artistName }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Slider from '@/components/Slider.vue';

const audio = ref(new Audio());
let currentProgress = ref(0);
let totalDuration = ref(null);

// ... 在这里添加音频管理和播放控制的方法
</script>