# music-player

**Repository Path**: gitjimmy/music-player

## Basic Information

- **Project Name**: music-player
- **Description**: 基于vue2开发的音乐播放器，核心功能已经开发了，还有部分功能没开发完，感兴趣的小伙伴一起开发~~
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-16
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# music播放器

### 项目拉下来安装
```
npm install
npm run serve
npm run build
```

#### Description
自己开发的一个基于vue2的h5音乐播放器还没有做完，有兴趣的一起开发~~

现阶段只是实现了一部分功能

开发注意事项:

- 引用vant(只用了部分少量组件)，不需要引用样式
- 滚动组件已经实现(利用better-scroll @/base/scroll)
- 代码结构是基于vuecli3
- 全局样式 (@/assets/css/global.css)定义了一些全局变量
- model中定义了一些模型数据类
- store/song.js 保存了控制播放器内核的数据
- 在chrome下iphone6/7/8开发

#### Software Architecture
服务端: 未实现

h5: 网页 

- 首页  已经实现 轮播图 列表页
- 首页的点击列表页 下拉背景图放大 已完成 双向列表 已完成 列表页左侧快速定位功能实现(触摸滚动功能已实现，适配有一点点问题)
- 播放器内核页
  - 全屏页
    - 播放器内核实现(已完成)
    - 播放器进度条播放已完成
    - 切换歌词动画 (完成)  歌词滚动定位(还未完成)
    - 歌曲切换(完成)
  - 缩小页
    - 播放器内核实现(已完成)
    - 播放器环形进度条播放已完成(适配未完成)
- 前端适配
  - 只是实现了一部分 

#### 效果图

<img src="./README.assets/image-20200216001026696.png" alt="image-20200216001026696" style="zoom:25%;" />

<img src="./README.assets/image-20200216001100852.png" alt="image-20200216001100852" style="zoom:25%;" />

<img src="./README.assets/image-20200216001127922.png" alt="image-20200216001127922" style="zoom:25%;" />

<img src="./README.assets/image-20200216001438012.png" alt="image-20200216001438012" style="zoom:25%;" />