@peakchao/music-player

Vue 3 音乐播放器

Vue 3 Music Player

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

安装

install

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

使用

apply

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

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

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

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

<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

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>