lofi music

Lofi-music?

Un projet React 18 + NextJS, créé pour le plaisir. J'étais fatigué d'ouvrir YouTube pour de la musique lo-fi tout en travaillant ?.

Cliquez ici pour une démo en direct!

À propos

Lofi-Music est une application Web qui vous permet de créer de la musique personnalisée tout en travaillant ou en étudiant! Cliquez simplement sur tous les sons que vous aimez dans la large sélection pour les superposer dans un mélange personnalisé.

Construit avec

• Composants stylisés
• Composants / disposition basés
• Plus joli pour une meilleure lisibilité

✅ Prendre le démarrage

Tout d'abord, clonez le dépôt de votre appareil à l'aide de la commande:

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

Ensuite, changez les répertoires en lofi-music avec la commande:

 cd lofi-music

Ensuite, exécutez la commande suivante pour installer tous les modules et leurs dépendances:

npm install

Usage

Pour exécuter l'application en mode développement, exécutez la commande suivante:

npm run dev

Ensuite, ouvrez http: // localhost: 3000 (port par défaut) pour le voir dans le navigateur.

Pour créer l'application pour la production dans le dossier build , exécutez:

npm run build

❓ Instructions

• Pour créer un mixage sonore , cliquez sur une image pour l'ajouter à vos sons actifs.
• Pour ajuster le volume d'un son individuel , faites glisser le curseur sous le son.
• Pour ajuster le volume de tous les sons actifs , faites glisser le curseur en bas de l'écran sous Sounds active: .
• Pour arrêter tous les sons , cliquez sur Stop all .
• Pour entrer en mode plein écran , cliquez sur l' window icon en haut à gauche de la barre d'icône. Pour quitter , cliquez à nouveau sur l'icône.
• Pour obtenir un mélange aléatoire de sons , cliquez sur l' arrow icon dans la barre d'icônes.
• Pour modifier les couleurs d'arrière-plan de l'application, cliquez sur l' gear icon dans la barre d'icônes et sélectionnez une couleur.
• Pour obtenir un mélange aléatoire de sons en fonction de votre humeur , cliquez sur l' face icon dans la barre d'icônes et sélectionnez votre humeur.

? Exécuter des tests

Pour exécuter les tests, exécutez la commande suivante:

npm test

Pour vérifier la couverture de test (70% global minimum requis), exécutez la commande suivante:

npm test -- --coverage

Une fois la commande exécutée, recherchez le dossier /coverage , puis /lcov-report et ouvrez index.html dans un navigateur.

Structure du projet

 .
├── 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

? Contributif

N'hésitez pas à ouvrir des problèmes, à tirer les demandes et à refactor / correction! Il s'agit d'un projet vivant et toute aide est la bienvenue. Merci!

Pour voir les problèmes actuels, consultez la page des problèmes.

Pour contribuer, suivez les étapes ci-dessous:

1. Créez une fourche de ce dépôt.
2. Créez un dossier sur votre appareil et clonez le repo fourchu.

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

3. Créez une branche de fonctionnalité.

 git checkout -b new-feature

4. Engagez vos modifications.

 git commit -m 'Added feature'

5. Pousser à la branche.

 git push origin new-feature

6. Soumettre une demande de traction.
   

Licence

Distribué sous la licence du MIT. Voir LICENSE pour plus d'informations.