基于React開發一個音樂播放器

phoenixsky 發布于2019-08-22 17:15 / 1814人閱讀

摘要：同時支持與系統。下載地址掘金鏈接項目使用作為外殼，作為打包工具，核心技術包括，簡單實現了一個音樂播放器的基礎功能。最終的解決方案是設置個，第一個用來作為模糊背景圖，第二個用于顯示不被模糊的文字同時使用半透明黑色遮罩，避免顏色沖突。

同時支持 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云服務器安卓開發音樂播放器網絡音樂播放器安卓音樂播放器音樂播放器實現

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

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