open-index/open-npm huggingface dataset:
npm package: @peakchao/music-player
Description: vue3音乐播放器组件。
Author: peakchao
Latest version: 0.0.12

# Vue 3 音乐播放器

# Vue 3 Music Player

一个轻巧的音乐播放器，基于 vue3 编写。
A lightweight music player, written on the basis of vue3.

## 安装

## install

```shell
npm i @peakchao/music-player
yarn add @peakchao/music-player
pnpm add @peakchao/music-player
```

## 使用

## apply

> 一、全局导入`main.ts`
> main.ts . Global import

```typescript
import MusicPlayer from "@peakchao/music-player";
import "@peakchao/music-player/dist/style.css";
const app = createApp(App);
app.use(MusicPlayer);
app.mount("#app");
```

> 二、按需导入`app.vue`
> main.ts . On demand import

```typescript
import { MusicPlayer } from "@peakchao/music-player";
import "music-player/dist/style.css";
```

> 三、布局`app.vue`
> app.vue . Layout

```typescript
<script setup lang="ts">
const musicList = ref([
  {
    name: '你走（七元完整版）',
    singer: '七元',
    lrc: 'xxxx.lrc',
    cover: 'http://p2.music.126.net/hcS3EdO4uF05RigVXyNFwQ==/109951168638978422.jpg?param=300x300',
    url: 'http://music.163.com/song/media/outer/url?id=1819086509.mp3',
  }
])
</script>

<template>
  <MusicPlayer ref="playerRef" :musicList="musicList" />
</template>
```

> 四、事件/方法
> Event/Method

```typescript
import { onMounted, ref } from "vue";
const playerRef = ref<any>(null);
const musicList = ref([
  {
    name: '你走（七元完整版）',
    singer: '七元',
    lrc: 'xxxx.lrc',
    cover: 'http://p2.music.126.net/hcS3EdO4uF05RigVXyNFwQ==/109951168638978422.jpg?param=300x300',
    url: 'http://music.163.com/song/media/outer/url?id=1819086509.mp3',
  }
])

onMounted(() => {
  // 通过ref设置播放时间
  playerRef.value && playerRef.value.setTime(7)
  // 通过ref获取原生`audio`元素
  playerRef.value && playerRef.value.getAudio()
})

const playChange = (music) => {
  console.log('播放状态更新：', music);
}

const clickMenu = (music) => {
  console.log('点击了菜单', music);
}
</script>

<template>
  <MusicPlayer
    ref="playerRef"
    :musicList="musicList"
    @playChange="playChange"
    @clickMenu="clickMenu"
    :showLrc="true"
    lrcColor="blue"
  />
</template>
```