# 音乐播放组件

**Repository Path**: zc16607/music-player-components

## Basic Information

- **Project Name**: 音乐播放组件
- **Description**: 基于vue + elementUI开发的热门音乐播放组件。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2021-02-19
- **Last Updated**: 2025-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### vue-web-music-component
vue + elementUI实现的网页音乐播放组件

#### 预览图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0306/114559_94980203_7441202.png "屏幕截图.png")
![歌词滚动](https://images.gitee.com/uploads/images/2021/0306/114452_8561f308_7441202.png "屏幕截图.png")

#### 后端接口是在网上找的网易云接口，后端已经做了跨站处理。你也可以自己搭建一个后台。
#### 使用elementUI组件，布局使用了flex。

#### 传参
##### - 类型 type: String, 值可选，默认medium。 small 小窗模式 medium 标准模式 large 大屏模式
##### - 播放歌单id playlistid: Number, 值可选，默认3778678（网易热门歌单）
##### - 播放列表高度 playlistheight: Number, 值可选，默认186，单位px。
##### - 后端解析基础url baseurl: String, 值可选，格式：http://xxx.xx/  url后的接口为固定，参照https://binaryify.github.io/NeteaseCloudMusicApi

#### 功能
##### - 列表循环播放，随机播放，单曲播放
##### - 歌名、歌词切换显示
##### - 播放时间，进度显示，拖拽进度条播放
##### - 歌曲列表显示，上一曲，播放/暂停，下一曲，静音


###  **一、查看效果：** 
#### 克隆到本地后，在命令行中先安装必要模块
npm install

#### 启动，查看界面
npm run serve


###  **二、导入组件到自己的项目使用** 

#### 1. 导入组件依赖的elementUI组件

```
import Vue from 'vue'
import { Slider } from 'element-ui'

Vue.use(Slider)

```

#### 2. 在需要使用组件的地方导入本组件：

```
import webMusicCom from "../components/webMusicCom/index";
export default {
  components: {
    webMusicCom
  }
};
```
导入之后，模板里面就可以直接使用：
`<web-music-com></web-music-com>`