Skip to content
Music player for myself, based on Create React App.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

Music Player

基于 create-react-app 脚手架工具实现的音乐播放器。

示例

Demo

如何开始

git clone https://github.com/chunqiuyiyu/music-player.git
cd music-player
npm install
npm start

已实现

  • 歌曲列表
  • 歌词同步显示
  • 本地资源(音乐与歌词)读取
  • 自定义的播放器样式
  • 基本的播放功能(音乐的播放与暂停、顺序播放)
  • 音乐进度的本地存储
  • 歌曲列表随音乐进度滚动

添加音乐

  1. 添加音乐文件与对应歌词文件(文件名保证一致)到./public/musics/路径
  2. 修改./public/musics/list.json,添加音乐信息,包括音乐名称、演唱家名称与歌词名称,其中音乐名称、演唱家名称显示在播放器控件与歌曲列表中,歌词名称就是上一步中定义的文件名(应用通过此文件名加载音乐与歌词)
{
  "song_name": "song_name",
  "artist": "somebody",
  "lrc_name": "lrc_name"
}
  1. 使用npm start重新编译运行项目
  2. 如果要发布到正式环境,请使用npm build,打包后的文件在./build/下,部署此目录下所有文件到线上即可

结语

感谢 react、webpack、babel 等一系列优秀的开源项目,可以让前端开发如此简单快乐。

You can’t perform that action at this time.