个人搭建的React项目之React音乐播放器

该项目是本人自使用react框架以来制作的较大的项目,目前该项目放在github上,感兴趣的朋友可以去看看一下,觉得还行的话可以给个star,哈哈

地址:https://github.com/cocoxiaoyue/react-music-player

项目环境 运行

  1、该项目是基于node环境,通过create-react-app搭建的react项目,所以该项目应在装有node的机器上运行。

  2、该项目运用的是网易云音乐接口,所以应该下载网易云音乐接口项目https://github.com/agnij/NeteaseCloudMusicApi 并运行set PORT=4000 && node app.js 开启4000端口。

  3、使用npm start 启动该项目。

项目结构:

  .vscode VS code编辑软件的文件。

  config 是该项目的一些配置文件,里面包含less,js等等的一些配置。

  node_modules 该文件是npm下载的一些文件的集合,包括redux等等。

  public 是项目的公共文件,也是项目以后的打包文件夹的去处,是项目的入口文件。

  scripts 是项目的运行,打包,以及测试的文件启动文件。

  src 是项目的主要文件的放置地方,里面包含有路由的配置,项目的组件等等。

  package.json 是项目用到的模块的说明,以及一些模块的版本信息。

  package-lock.json 锁定安装时的包的版本号,使得安装的版本和我当前的版本信息一致。

  README.md 这是github的说明文档。

项目功能介绍

  1、歌单查看

  2、歌曲播放

  3、歌单收藏

  4、歌手详情

  5、搜索歌曲

  6、切歌模式

上截图:

原文地址:https://www.cnblogs.com/smsllStar/p/10193311.html

时间: 2024-10-12 12:45:14

个人搭建的React项目之React音乐播放器的相关文章

实战React音乐播放器

上篇文章<一步一步实战HTML音乐播放器>中,我用HTML+JS + CSS的方式一步步实现了一个音乐播放器,因为最近接触了一下React,感觉挺不错的,在这里我用React的方式实现一个同样的音乐播放器. 播放器功能 自动显示 专辑图片.歌手名.歌曲名.专辑名 显示播放器进度条 音乐播放暂停.上一曲.下一曲 实时显示播放时间.播放总长度 歌曲播放完后,自动切换下一曲 播放器效果 React 环境准备 在这个小项目中,不再使用传统的构建React的方式来搭建环境了,这里用一种很方便的小工具来实

React Native (一) react-native-video实现音乐播放器和进度条的功能

React Native (一) react-native-video实现音乐播放器和进度条的功能 功能: 1.卡片滑动切歌 2.显示进度条 效果图: 第三方组件: 1.react-native-video Github地址:https://github.com/react-native-community/react-native-video 2.react-native-animated-tabs Github地址:https://github.com/philipshurpik/react

Andriod小项目——在线音乐播放器

Android在线音乐播放器 从大一开始就已经开始自学Java和Android了,到现在差不多有一年了. 终于到了开始做项目实战的阶段了.就先DIY个在线音乐播放器. 实现了以下功能: 这个播放器可以从本机电脑搭建的简易服务器里异步读取并解析json数据,播放音乐,实现音乐切换,时间显示,以及显示播放进度. 程序有三个界面,启动画面,音乐列表,播放器页面,可以通过音乐列表点击进入到播放界面. 这篇文章只大概写了一下实现的思路,描述了一些关键的地方. 文章最后还提供了源代码,可以在文章结尾处  下

iOS 简单音乐播放器 界面搭建

如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间图片,隐藏所有按钮,仅显示蓝色背景. 设计的整体思路: 1.在搭建界面的时候,为了整洁和方便后续的功能的添加,需要将整个的界面划分为几个部分: ①:最上面的一行包括:一个返回按钮.一个歌曲名称.一个收藏按钮: ②:第二行:一个slider控件.两侧是当前的歌曲播放进度和歌曲的总时长--两个lable

swift 音乐播放器项目-《lxy的杰伦情歌》开发实战演练

最近准备将项目转化为OC与swift混合开发,试着写一个swift音乐播放器的demo,体会到了swift相对OC的优势所在,废话不多说,先上效果图: ps:身为杰伦的铁粉,demo的主题必须跟杰伦有关,哈哈!而且自我感觉我有转型UI的天赋,有木有? 一.导入OC文件 创建好swift项目之后,导入OC工具类文件,Xcode会自动生成桥接文件 打开这个文件,在开头导入OC工具类的头文件,就可以调用OC工具类了 // // Use this file to import your target's

HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

团队项目 NABCD分析java音乐播放器

NABCD分析java音乐播放器 程设计题目:java音乐播放器 一.课程设计目的 1.编程设计音乐播放软件,使之实现音乐播放的功能. 2.培养学生用程序解决实际问题的能力和兴趣. 3.加深java中对多媒体编程的应用. 二.课程设计的要求 利用学到的编程知识和编程技巧,要求学生: 1.系统设计要能完成题目所要求的功能,设计的软件可以进行简单的播放及其他基本功能. 2.编程简练,可用,尽可能的使系统的功能更加完善和全面 3.说明书.流程图要清楚. 三.课程设计内容 1.课程设计的题目及简介 音乐

MPlayer音乐播放器项目讲解

一.简要介绍MPlyer音乐播放器 MPlayer是一款开源多媒体播放器,以GNU通用公共许可证发布.此款软件可在各主流操作系统使用,例如Linux和其他类Unix系统.Windows及Mac OS X系统. 二.在开发板实现MPlayer功能 具体如何实现mute 0 静音,为什么用这个命令不用我们做,我们要做的是在开发板上获取出界面后,按下相应按钮实现相应的功能,即对这个命令的处理和调用. 三.思路 1.画glade界面 2.主函数分为父.子进程 父进程:开启mplayer,用到execlp

手把手教你做音乐播放器(八)桌面小工具(上)

第8节 桌面小工具 桌面小工具是可以放置在主界面的.快速控制应用的小助手.例如我们的音乐小工具,它可以帮助用户在桌面上就完成音乐的暂停.播放.切换等操作,而不需要启动应用本身. 在安卓系统中,我们也常常叫它App widget. 实现一个App widget要经过以下几个步骤, 创建一个App widget类,让它继承自AppWidgetProvider,例如AnddleMusicAppWidget类: 放在res\layout目录下,为App widget的界面定义一个布局,例如anddle_

iOS开发拓展篇—音频处理(音乐播放器2)

iOS开发拓展篇—音频处理(音乐播放器2) 说明:该文主要介绍音乐播放界面的搭建. 一.跳转 1.跳转到音乐播放界面的方法选择 (1)使用模态跳转(又分为手动的和自动的) (2)使用xib并设置跳转 2.两种方法的分析 可以使用模态的方法,添加一个控制器,让这个控制器和音乐播放控制器类进行关联,脱线,设置标识符且在cell的点击事件中执行segue即可. 步骤说明: (1)在storyboard中新拖入一个控制器,然后设置和playing控制器类相关联. (2)设置手动跳转 (3)设置segue