lofi music

Lofi音樂？

React 18 + NextJS項目是為了娛樂而創建的。我厭倦了在工作時打開YouTube的一些Lo-Fi音樂？

單擊此處進行現場演示！

關於

Lofi-Music是一個Web應用程序，可讓您在工作或學習時創建自定義音樂！只需單擊從廣泛選擇中的任何聲音，將它們疊加到自定義混合物中即可。

建立

• 樣式的組件
• 基於組件/佈局
• 更漂亮的可讀性

✅入門

首先，使用命令將存儲庫克隆到您的設備上：

 git clone https://github.com/riccardobertolini/lofi-music.git

然後，使用命令將目錄更改為lofi-music ：

 cd lofi-music

接下來，運行以下命令以安裝所有模塊及其依賴項：

npm install

用法

要以開發模式運行該應用，請運行以下命令：

npm run dev

然後，打開http：// localhost：3000（默認端口）以在瀏覽器中查看。

要構建用於生產到build文件夾的應用程序，請運行：

npm run build

❓說明

• 要創建聲音混音，請單擊圖像以將其添加到您的活動聲音中。
• 要調整單個聲音的音量，請在聲音下方拖動滑塊。
• 要調整所有活動聲音的音量，請將滑塊拖到屏幕底部的Sounds active: 。
• 要停止所有聲音，請單擊Stop all 。
• 要輸入全屏模式，請單擊圖標欄左上方的window icon 。要退出，請再次單擊圖標。
• 要隨機混合聲音，請單擊圖標欄中的arrow icon 。
• 要更改應用程序的背景顏色，請單擊圖標欄中的gear icon ，然後選擇顏色。
• 要根據您的心情隨機混合聲音，請單擊圖標欄中的face icon ，然後選擇您的心情。

？運行測試

要運行測試，請運行以下命令：

npm test

要檢查測試覆蓋範圍（最小必需的全局70％），請運行以下命令：

npm test -- --coverage

運行命令後，搜索/coverage文件夾，然後/lcov-report ，然後在瀏覽器中打開index.html 。

項目結構

 .
├── components // All app components (MusicTiles, Shuffler, etc.)
├── constants // Enum of colors
├── contexts // Accessibility Context
├── data // Music list with corresponding image and mp3 sources
├── pages // The app
├── public // Audio and image files
├── styles // CSS file
└── utils // Fullscreen mode

？貢獻

請隨時打開問題，提取請求和重構/修復！這是一個活生生的項目，歡迎任何幫助。謝謝！

要查看當前問題，請查看“問題”頁面。

為了做出貢獻，請按照以下步驟操作：

1. 創建此存儲庫的叉子。
2. 在您的設備上創建一個文件夾，然後將叉子存儲庫克隆到其中。

 git clone https://github.com/[YOUR-USERNAME-HERE]/lofi-music.git

3. 創建一個功能分支。

 git checkout -b new-feature

4. 提交您的更改。

 git commit -m 'Added feature'

5. 推到分支。

 git push origin new-feature

6. 提交拉動請求。
   

執照

根據MIT許可分發。有關更多信息，請參見LICENSE 。