成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React實現(xiàn)H5在線音樂播放器

whatsns / 818人閱讀

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

React-music

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

地址(歡迎start哦~) 
在線地址:http://music.wuhann.cn/#/home
后端github地址:https://github.com/Mohannnnn/react-music-koa2
前端github地址:https://github.com/Mohannnnn/react-music
技術(shù)棧

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

目錄結(jié)構(gòu) 
│  .babelrc              #babel的規(guī)則以及插件
│  .editorconfig        #IDE/編輯器相關(guān)的配置
│  .eslintignore        #Eslint忽視的目錄
│  .eslintrc.js            #Eslint的規(guī)則和插件
│  .gitignore            #Git忽視的目錄
│  .postcssrc.js        #postcss的插件
│  package-lock.json
│  package.json            #項目相關(guān)的包
│  README.md
│  yarn.lock
│
├─build                    #webpack相關(guān)的配置
│      utils.js            #webpack配置中的通用方法
│      webpack.base.conf.js    #webpack的基礎(chǔ)配置
│      webpack.dev.conf.js    #webpack的開發(fā)環(huán)境配置
│      webpack.prod.conf.js    #webpack的生產(chǎn)環(huán)境配置
│
└─src                    #主目錄，業(yè)務(wù)代碼
    │  app.css
    │  App.js
    │  favicon.ico
    │  index.ejs
    │  index.js
    │
    │-api               #接口api等配置
    │-compontents       #組件
    │-store             #Redux管理目錄
    │-utils             #工具函數(shù)位置
    │-router            #路由
    └─assets            #靜態(tài)目錄，存放靜態(tài)資源
V1.0實現(xiàn)的功能

1.推薦歌單頁

2.推薦歌單詳情頁

3.熱門歌曲頁

4.播放頁

5.搜索（QQ音樂、網(wǎng)易云、酷狗）

6.音樂全局播放

7.歌詞同步(在播放頁，點擊轉(zhuǎn)動的圖片)

8.切換上一首、下一首

V2.0實現(xiàn)的功能

1.添加到歌單、從歌單刪除、刪除全部

2.歌詞動畫、以及每個路由下的頁面出場動畫

3.隨機播放、順序播放

4.音量控制（未做,感覺意義不大,手機能自己調(diào)）

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

安裝依賴 
yarn install / npm install
啟動項目 
yarn dev/npm run dev
打包項目 
yarn build/npm run build
demo


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102356.html

相關(guān)文章

  • ?基于H5+js開發(fā)一款音樂播放器

    前言：當(dāng)下音樂播放器不勝其數(shù)，為了更好的掌握一些東西，我們來自己制作一個音樂播放器。 文章目錄： 一.開發(fā)環(huán)境：二.頁面視圖：1.主文件入口（首頁）：2.音樂播放界面： 三.功能實現(xiàn)（1）、index.html：（2）、播放音樂（music.html）：（3）、樣式文件（index.css）： 四.項目地址： 一.開發(fā)環(huán)境： 開發(fā)工具：HbuliderX； 框架：Vant，Mui，V...

    BearyChat 評論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復(fù)精讀！ 聽說2017你想寫前端？：適合于已經(jīng)度過了小白階...

    awesome23 評論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復(fù)精讀！ 聽說2017你想寫前端？：適合于已經(jīng)度過了小白階...

    antyiwei 評論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復(fù)精讀！ 聽說2017你想寫前端？：適合于已經(jīng)度過了小白階...

    KavenFan 評論0 收藏0

  • 微信h5頁面audio標(biāo)簽在ios下不能自動播放

    摘要：背景介紹在一個頁面中當(dāng)用戶提交表單到后臺后臺返回的結(jié)果成功的話開始自動播放背景音樂出現(xiàn)的問題在安卓手機上正常中沒有反應(yīng)后來網(wǎng)上一番搜索后了解到時因為不允許自動播放音樂除非用戶做出了交互行為解決方案如果是在頁面剛加載就需要自動播放音頻的話還是 背景介紹:在一個h5頁面中,當(dāng)用戶提交表單到后臺,后臺返回的結(jié)果成功的話,開始自動播放背景音樂 出現(xiàn)的問題:在安卓手機上正常,iOS中沒有反...

    jlanglang 評論0 收藏0

發(fā)表評論

0條評論

whatsns

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<