# H5音乐播放器

**Repository Path**: CrimsonHu/h5-music-player

## Basic Information

- **Project Name**: H5音乐播放器
- **Description**: 基于Angular+ionic的音乐播放器，支持实时歌词显示，音频可视化
- **Primary Language**: TypeScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 31
- **Forks**: 6
- **Created**: 2021-04-11
- **Last Updated**: 2025-06-19

## Categories & Tags

**Categories**: multimedia

**Tags**: None

## README

# H5音乐播放器

#### 介绍
基于Angular+ionic的H5音乐播放器，PC与移动端双界面适配，支持跨平台app打包

#### 新版本！！！
本项目将使用Angular、Vue、React三个框架各写一套对应的代码，以供学习“框架与业务分离”的思想

#### 精品功能！！！
1. 用Proxy帮助React实现响应式，干掉setState
2. 在Vue与React中基于Proxy实现状态管理
3. 使用rxjs为三个框架实现通用的跨组件交互功能
4. 综上所述，实现在三个框架中使用完全一致的代码风格编写业务模块，降低框架学习难度，提高开发效率

#### 示例地址
建议使用原版chrome或edge访问（PC与移动端均可），国产浏览器可能不会支持最新版Angular的部分特性：[https://intelyes.club/114514](https://intelyes.club/114514)

#### 功能
1. 实时歌词显示
2. 支持歌词注音与翻译显示（本代码以日语假名为例）
3. 点击歌词能实时跳转至相应时间
4. 音频可视化

#### 运行方法
1. 安装最新LTS版本nodejs，可以切换npm为腾讯源或华为源（angular项目不建议使用cnpm或阿里源）
2. 安装angular-cli（npm install -g @angular/cli）
3. 安装ionic-cli（npm install -g @ionic/cli）
4. 进入项目文件夹运行npm install安装项目依赖
5. 运行npm start，浏览器访问http://localhost:5300/

#### 打包部署
1. 可直接打包成web，也可以打包成apk或ios应用
2. 安卓与ios的打包方法详见ionic官方文档，package.json已写好相应的打包命令

#### 图片示例
![输入图片说明](img/1.png)
![输入图片说明](img/4.png)
![输入图片说明](img/2.png)
![输入图片说明](img/3.png)

#### 注意事项
内置歌曲仅供该软件学习使用