# MusicApplet

**Repository Path**: cake_Fang/music-applet

## Basic Information

- **Project Name**: MusicApplet
- **Description**: 音乐播放小程序
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-06
- **Last Updated**: 2023-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MusicApplet


## 项目介绍
随心听音乐/视频播放小程序，UI设计借鉴网易云，主要数据来源
网易云音乐 NodeJS 版 API：https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
使用微信开发者工具原生开发

## 安装教程

1.  拉取代码后使用微信开发者工具打开
2.  进入微信公众平台获取appid进行替换
3.  若是服务器接口失效，可在本地运行服务[网易云音乐 NodeJS 版](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi "网易云音乐 NodeJS 版")，在项目文件 service->inde.js中替换BASE_URL为本地端口

## 项目预览
### 音乐首页
#### 1. 轮播图展示
轮播图大小自适应不同设备机型

.<img src="https://foruda.gitee.com/images/1680252333621761666/d3d8ff87_8592362.png" width="220" height="450" />
<!-- ![首页展示](https://foruda.gitee.com/images/1680252333621761666/d3d8ff87_8592362.png "轮播图歌曲推荐.png") -->

#### 2. 新歌速递
首页新歌速递点击“更多”，进入歌曲列表
<!-- ![更多歌曲列表展示](https://foruda.gitee.com/images/1680252606651871079/34d0a749_8592362.png "更多歌曲列表.png") -->
.<img src="https://foruda.gitee.com/images/1680252606651871079/34d0a749_8592362.png" width="220" height="450" />

#### 3. 歌单展示
歌单区域可横向滑动，点击歌单项跳转至歌单详情
<!-- ![歌单展示](https://foruda.gitee.com/images/1680252558667932902/549c8a91_8592362.png "歌单展示.png")
![歌单详情](https://foruda.gitee.com/images/1680253113056263592/2ef1e67a_8592362.png "歌单详情.png") -->
.<img src="https://foruda.gitee.com/images/1680252558667932902/549c8a91_8592362.png" width="220" height="450" />
.<img src="https://foruda.gitee.com/images/1680253113056263592/2ef1e67a_8592362.png" width="220" height="450" />


### 歌曲检索

#### 1. 热门搜索
<!-- ![热门搜索项](https://foruda.gitee.com/images/1680253504801415730/a8f6fd50_8592362.png "热门搜索.png") -->
默认显示当下热门的搜索词条，点击单项可进行搜索

.<img src="https://foruda.gitee.com/images/1680253504801415730/a8f6fd50_8592362.png" width="220" height="450" />
#### 2. 搜索建议
<!-- ![搜索指引](https://foruda.gitee.com/images/1680253523434129470/45c195e1_8592362.png "搜索指引.png") -->
根据输入框内容显示搜索建议

.<img src="https://foruda.gitee.com/images/1680253523434129470/45c195e1_8592362.png" width="220" height="450" />

#### 3. 搜索结果
<!-- ![搜索结果列表](https://foruda.gitee.com/images/1680253537383493875/8eedf2ae_8592362.png "搜索结果.png") -->
搜索结果列表，点击单项可进入歌曲播放页

.<img src="https://foruda.gitee.com/images/1680253537383493875/8eedf2ae_8592362.png" width="220" height="450" />


### 歌曲检索

#### 1. 歌曲播放页
可操作功能：
* 歌曲播放进度条显示/控制播放进度
* 播放模式切换（顺序播放、循环播放、随机播放）
* 播放上一首，系统音乐播放面板也可切换上一曲（仅iOS)
* 暂停/继续 播放，系统音乐播放面板亦可相同操作
* 播放下一首，系统音乐播放面板也可切换下一曲（仅iOS)
<!-- ![歌曲播放页](https://foruda.gitee.com/images/1680253875163627755/8d32aaac_8592362.png "播放操作页.png") -->
.<img src="https://foruda.gitee.com/images/1680253875163627755/8d32aaac_8592362.png" width="220" height="450" />
#### 2. 歌词滚动页
显示歌词，并随着歌曲进度滚动，高亮显示当前播放语句
<!-- ![歌词页面](https://foruda.gitee.com/images/1680254702250719977/f0363f69_8592362.png "歌词页面.png") -->
.<img src="https://foruda.gitee.com/images/1680254702250719977/f0363f69_8592362.png" width="220" height="450" />

### MV播放
#### 1. MV展示页面
下拉可刷新，上划可展示更多MV，数据懒加载
<!-- ![mv展示](https://foruda.gitee.com/images/1680254953319859179/c680f630_8592362.png "mv展示.png") -->
.<img src="https://foruda.gitee.com/images/1680254953319859179/c680f630_8592362.png" width="220" height="450" />

#### 2. mv视频播放
视频可播放/暂停/滑动快进
<!-- ![输入图片说明](https://foruda.gitee.com/images/1680254984702628837/436108f4_8592362.png "视频播放.png") -->
.<img src="https://foruda.gitee.com/images/1680254984702628837/436108f4_8592362.png" width="220" height="450" />



## 使用说明

1.  xxxx
2.  xxxx
3.  xxxx