基于React开发一个音乐播放器

同时支持 Mac 与 Windows 系统。

• 下载地址
• 掘金链接

项目使用 electron 作为外壳，webpack 作为打包工具，核心技术包括 React + Redux + React-router v4 + antd，简单实现了一个音乐播放器的基础功能。

项目结构设计

|
|—— config // 打包配置
|—— mock // 模拟数据
|—— resource // 一些打包使用到的资源文件
└── src
     ├── main // 主进程
     └── renderer // 渲染进程
           ├── actions
           ├── api // 接口
           ├── assets // 公用静态资源
           ├── components // redux展示组件
           ├── containers // redux容器组件
           └── reducers

关键技术点

• 工程模式批量生产列表“高阶”组件

通过一个通用的工厂函数 connectListHoc，并定义相关的接口与参数规范，从而在其他地方能够通过使用该函数批量生产 react 组件，解决类似组件的复用问题

// define
export function connectListHoc ({
  className,
  stateName,
  playIcon = false,
  getAllData,
  itemOnClick
}, ListItemRender) {
  return '...'
}
// how to use
export default connectListHoc({...})

• 歌词界面高斯模糊

核心是css3的filter属性，由于该属性对性能有一定要求，因此使用该属性时，px值不能设置太高。一开始的设计是采用非常强烈的模糊效果，在mac端并无大问题，但是发现在较低配置的Windows上面会造成卡顿现象。最终的解决方案是设置2个div，第一个用来作为模糊背景图，第二个用于显示不被模糊的文字（同时使用半透明黑色遮罩，避免颜色冲突）。

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: @background-color; /* 图片未加载出来时 */
  filter: blur(15px);
}
.content {
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

• redux中间件与promise的配合使用
• ant-design按需打包与自定义react模版结合
• 拖拽本地歌曲进行播放
• 主进程与渲染进程的通信

Screenshot

项目包括几个基本页面，内部使用路由进行实现，其中，我的歌单及私人音乐馆必须登录后才可见。

在此，非常感谢 NeteaseCloudMusicApi 提供的 API。

这是一个个人茶余饭后的项目，也是对 React 技术栈的一次实践过程。项目中仍然有很多需要改进的地方，例如对 Redux 的 actions 还没有做到较好的模块化，因为使用了 ant-design，导致没有拆分足够的展示组件，界面也显得较为粗糙等。同时现阶段并没有对 electron 进行深入的开发，可以看到在登录界面，关于界面都直接采用了 web 端 Modal 的实现方式，这些都是后续开发需要解决的问题。

Last

贴上项目的 GitHub 地址： https://github.com/leezng/iMusic