lofi music

LOFI-MUSIC?

Проект React 18 + NextJS, созданный для развлечения. Я устал открывать YouTube для музыки Lo-Fi во время работы?

Нажмите здесь, чтобы получить живую демонстрацию!

О

Lofi-Music-это веб-приложение, которое позволяет создавать пользовательскую музыку во время работы или обучения! Просто щелкните любые звуки, которые вам нравятся из широкого выбора, чтобы наложить их в пользовательский микс.

Построен с

• Стилизованные компоненты
• Компоненты/макет на основе
• Красивее для лучшей читаемости

✅ Начало работы

Во -первых, клонируйте репо к своему устройству, используя команду:

 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 для получения дополнительной информации.