React实现H5在线音乐播放器

whatsns 发布于2019-08-23 15:38 / 762人阅读

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

React-music

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

地址(欢迎start哦~)

在线地址:http://music.wuhann.cn/#/home
后端github地址:https://github.com/Mohannnnn/react-music-koa2
前端github地址:https://github.com/Mohannnnn/react-music

技术栈

React + React-router + Redux + React-redux + ES6/7 + webpack4 + Ant Design + Ant Motion + Fetch/Axios + Scss

目录结构

│  .babelrc              #babel的规则以及插件
│  .editorconfig        #IDE/编辑器相关的配置
│  .eslintignore        #Eslint忽视的目录
│  .eslintrc.js            #Eslint的规则和插件
│  .gitignore            #Git忽视的目录
│  .postcssrc.js        #postcss的插件
│  package-lock.json
│  package.json            #项目相关的包
│  README.md
│  yarn.lock
│
├─build                    #webpack相关的配置
│      utils.js            #webpack配置中的通用方法
│      webpack.base.conf.js    #webpack的基础配置
│      webpack.dev.conf.js    #webpack的开发环境配置
│      webpack.prod.conf.js    #webpack的生产环境配置
│
└─src                    #主目录，业务代码
    │  app.css
    │  App.js
    │  favicon.ico
    │  index.ejs
    │  index.js
    │
    │-api               #接口api等配置
    │-compontents       #组件
    │-store             #Redux管理目录
    │-utils             #工具函数位置
    │-router            #路由
    └─assets            #静态目录，存放静态资源

V1.0实现的功能

1.推荐歌单页

2.推荐歌单详情页

3.热门歌曲页

4.播放页

5.搜索（QQ音乐、网易云、酷狗）

6.音乐全局播放

7.歌词同步(在播放页，点击转动的图片)

8.切换上一首、下一首

V2.0实现的功能

1.添加到歌单、从歌单删除、删除全部

2.歌词动画、以及每个路由下的页面出场动画

3.随机播放、顺序播放

4.音量控制（未做,感觉意义不大,手机能自己调）

5.其他(待定功能，想到在做)

安装依赖

yarn install / npm install

启动项目

yarn dev/npm run dev

打包项目

yarn build/npm run build

demo

云服务器 GPU云服务器音乐播放器实现 react实现轮播图 h5播放器 h5视频播放器

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

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

♥基于H5+js开发一款音乐播放器

前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。文章目录：一.开发环境：二.页面视图：1.主文件入口（首页）：2.音乐播放界面：三.功能实现（1）、index.html：（2）、播放音乐（music.html）：（3）、样式文件（index.css）：四.项目地址：一.开发环境：开发工具：HbuliderX；框架：Vant，Mui，V...

BearyChat 2021-09-29 09:34 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

KavenFan 2019-08-01 17:16 评论0 收藏0
微信h5页面audio标签在ios下不能自动播放

摘要：背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐出现的问题:在安卓手机上正常,iOS中没有反...

jlanglang 2019-08-26 11:49 评论0 收藏0