说明

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

如何开始

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

已实现

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

示例

Demo

添加音乐

  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 等一系列优秀的开源项目,可以让前端开发如此简单快乐。