React實現H5在線音樂播放器

whatsns 發布于2019-08-23 15:38 / 812人閱讀

摘要：，在聽音樂的時候忽然想聽騰格爾的鋼鐵之翼隱形的翅膀，在網易云上卻找不到，就很氣。于是想到了做一個，音樂搜索的功能，把所有想聽的歌，能夠一次性在酷狗網易云蝦米等平臺上找找完。本項目非常適合新手練習熟悉全家桶，歡迎哦。

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視頻播放器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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