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

phoenixsky 发布于2019-08-22 17:15 / 1790人阅读

摘要：同时支持与系统。下载地址掘金链接项目使用作为外壳，作为打包工具，核心技术包括，简单实现了一个音乐播放器的基础功能。最终的解决方案是设置个，第一个用来作为模糊背景图，第二个用于显示不被模糊的文字同时使用半透明黑色遮罩，避免颜色冲突。

同时支持 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

GPU云服务器云服务器安卓开发音乐播放器网络音乐播放器安卓音乐播放器音乐播放器实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95000.html

基于React的仿QQ音乐（移动端）

摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。前言由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...

xiaodao 2019-08-21 16:41 评论0 收藏0
s音乐播放器基于React.js

摘要：现在都是做公司项目，空闲就看看网络和算法。我是喜欢瞎折腾的自己。有大块时间的时候再给加几个功能。界面滑动，歌词滑动，下载。歌词滚动一直没能实现，因为三家音乐网站爬来的，不是每一家都有歌词。阿里云过期暂时不能看例子。 Github react+react-router+redux 为了学习react写的，代码肯定不够好，大佬轻喷如果有大佬缺人，觉得这个应届生不错，请联系我！本人在杭...

Carson 2019-08-20 15:54 评论0 收藏0
React实现H5在线音乐播放器

摘要：，在听音乐的时候忽然想听腾格尔的钢铁之翼隐形的翅膀，在网易云上却找不到，就很气。于是想到了做一个，音乐搜索的功能，把所有想听的歌，能够一次性在酷狗网易云虾米等平台上找找完。本项目非常适合新手练习熟悉全家桶，欢迎哦。 React-music React Music WebApp，在听音乐的时候忽然想听腾格尔的钢铁之翼（隐形的翅膀），在网易云上却找不到，就很气。于是想到了做一个，音乐搜索的...

whatsns 2019-08-23 15:38 评论0 收藏0