在线媒体播放器

介绍

名称：在线媒体播放器 - MediaPlayer

简介：在线媒体播放器，支持播放音乐，视频，支持管理员管理账户，添加本地音乐。界面风格类似于网易云音乐在线版。

技术栈：后端 Java SpringBoot + 前端 React Umi.js，后端实现媒体流，前端基于H5实现播放媒体，可打包为HyperApp应用到安卓。

类型：前后端分离应用，WebApp，外包项目

安装

目录结构

MediaPlayer-Backend：后端

MediaPlayer-Frontend：前端

数据库表结构：数据库

assets：示例文件

文档：一些文档

如何运行

后端：标准Java Maven SpringBoot工程，在pom.xml目录下执行mvn install拉取依赖后，mvn package打包jar包，推荐在idea环境下配置maven项目。

mvn install
mvn package
java -jar ./target/xxx.jar

前端：标准webpack工程，在package.json目录下执行npm install拉取依赖，npm start运行工程，npm build构建工程。

npm install
npm start
npm build

数据库：记得导入数据库表结构，默认utf8mb4。

mysql -u root -h host -p < media_player_xxx.sql

功能

1. 登录功能，支持注册账号，登录，基于拦截器实现权限认证；

2. 音乐库管理，支持mp3格式的音乐库管理，点击即可在线播放，基于H5 audio；

3. 视频库管理，支持mp4格式的视频库管理，点击即可在线播放，基于H5 video；

4. 媒体详情，支持对音频的媒体名，艺术家，风格进行修改；

5. 本地媒体扫描，支持扫描本地媒体文件，播放本地媒体文件，基于MD5 + 服务端mysql；

6. 上传媒体到服务端，支持上传mp3、mp4文件到服务端保存，基于文件管理；

7. 我喜欢，添加媒体文件到我喜欢列表。

效果

音乐库

媒体详情

媒体管理