🎵 a PC music App based on React.

Supports both Mac and Windows. Download address

The project uses Electron as the shell, Webpack as the packaging tool, and core technologies include React + Redux + React-Router V4 + ANTD, which simply realizes the basic functions of a music player.

Project structure design

| | | - config / / packaging configuration, mock | - the resource of simulation data / / / / some packaging to use resource files └ ─ ─ the SRC ├ ─ ─ the main / / main process └ ─ ─ the renderer / / rendering process ├ ─ ─ Actions ├ ─ ─ the API / / interface ├ ─ ─ assets / / public static resource ├ ─ ─ the components / / redux display component ├ ─ ─ containers / / redux container components └ ─ ─ reducersCopy the code

Key Technical points

  • Engineering mode mass-produces list “advanced” components

A generic factory function, connectListHoc, can be used elsewhere to mass-produce React components and solve the reuse problem of similar components by defining interfaces and parameters

// define
export function connectListHoc ({ className, stateName, playIcon = false, getAllData, itemOnClick }, ListItemRender) {
  return '... '
}
// how to use
export defaultconnectListHoc({... })Copy the code
  • The lyrics interface is gaussian blur

The core is the filter attribute of CSS3. Because this attribute has certain requirements on performance, the PX value cannot be set too high when using this attribute. The initial design was to use a very strong blur effect, which was not a big problem on the MAC side, but found that it would cause lag on the lower configuration of Windows. The final solution was to set up two divs, the first to serve as a blurred background image and the second to display text that was not blurred (while also using a translucent black mask to avoid color conflicts).

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: @background-color; /* The image is not loaded */
  filter: blur(15px);
}
.content {
  height: 100%;
  background-color: rgba(0, 0, 0, 5); }Copy the code
  • Redux middleware used in conjunction with Promise
  • Ant-design is packaged on-demand in combination with a custom React template
  • Drag and drop local songs to play
  • Communication between the main process and the renderer

Screenshot

The project includes several basic pages, which are realized by internal routing. Among them, my playlist and private music hall can only be seen after logging in.

Thank you very much for the API provided by the NeteaseCloudMusicApi.

This is a personal lunch project and a hands-on experience with the React technology stack. There is still a lot of work to be done in the project. For example, the actions for Redux are not well modularized, not enough display components are broken up due to the use of Ant-Design, and the interface is a bit rough. At the same time, the electron has not been further developed at the present stage. It can be seen that in the login interface, web side Modal is directly used to realize the interface, which are all problems to be solved in the subsequent development.

Last

Project address: github.com/leezng/iMus…