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 。