lofi music

Lofi-Musik?

Ein React 18 + NextJS -Projekt, das zum Spaß erstellt wurde. Ich hatte es satt, YouTube für einige LO-Fi-Musik während der Arbeit zu öffnen?

Klicken Sie hier für eine Live -Demo!

Um

Lofi-Music ist eine Webanwendung, mit der Sie beim Arbeiten oder Lernen benutzerdefinierte Musik erstellen können! Klicken Sie einfach auf alle Geräusche, die Ihnen aus der großen Auswahl mögen, um sie in eine benutzerdefinierte Mischung zu überlagern.

Gebaut mit

• Gestaltete Komponenten
• Komponenten/Layoutbasiert
• Schöner für eine bessere Lesbarkeit

✅ Erste Schritte

Klonen Sie zunächst das Repo mit dem Befehl an Ihr Gerät:

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

Wechseln Sie dann die Verzeichnisse in lofi-music mit dem Befehl ein:

 cd lofi-music

Führen Sie als nächstes den folgenden Befehl aus, um alle Module und ihre Abhängigkeiten zu installieren:

npm install

Verwendung

Führen Sie den folgenden Befehl aus, um die App im Entwicklungsmodus auszuführen:

npm run dev

Öffnen Sie dann http: // localhost: 3000 (Standardport), um es im Browser anzuzeigen.

Um die App für die Produktion im build -Ordner zu erstellen, rennen Sie:

npm run build

❓ Anweisungen

• Klicken Sie auf ein Bild, um es Ihren aktiven Sounds hinzuzufügen, um eine Soundmischung zu erstellen.
• Um die Lautstärke eines einzelnen Klangs anzupassen, ziehen Sie den Schieberegler unter den Klang.
• Um die Lautstärke aller aktiven Geräusche anzupassen, ziehen Sie den Schieberegler am unteren Bildschirmrand unter Sounds active: .
• Um alle Geräusche zu stoppen , klicken Sie auf Stop all .
• Um den Vollbildmodus einzugeben, klicken Sie auf das window icon oben links in der Symbolleiste. Klicken Sie zum Beenden erneut auf das Symbol.
• Um eine zufällige Mischung aus Geräuschen zu erhalten, klicken Sie auf das arrow icon in der Symbolleiste.
• Um die Hintergrundfarben der App zu ändern, klicken Sie in der gear icon und wählen Sie eine Farbe aus.
• Klicken Sie auf das face icon in der Symbolleiste und wählen Sie Ihre Stimmung aus, um eine zufällige Mischung aus Sounds zu erhalten.

? Tests ausführen

Führen Sie den folgenden Befehl aus, um die Tests auszuführen:

npm test

Führen Sie den folgenden Befehl aus:

npm test -- --coverage

Suchen Sie nach dem Ausführen des Befehls nach dem Ordner /coverage , dann /lcov-report und öffnen Sie index.html in einem Browser.

Projektstruktur

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

? Beitragen

Bitte zögern Sie nicht, Probleme zu öffnen, Anfragen und Refactor/Fix zu ziehen! Dies ist ein lebendes Projekt und jede Hilfe ist willkommen. Danke!

Um aktuelle Probleme anzuzeigen, lesen Sie die Seite der Probleme.

Befolgen Sie die folgenden Schritte, um dazu beizutragen:

1. Erstellen Sie eine Gabel dieses Repo.
2. Erstellen Sie einen Ordner auf Ihrem Gerät und klonen Sie das Forked Repo hinein.

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

3. Erstellen Sie einen Feature -Zweig.

 git checkout -b new-feature

4. Verpflichten Sie Ihre Änderungen.

 git commit -m 'Added feature'

5. In den Zweig drücken.

 git push origin new-feature

6. Senden Sie eine Pull -Anfrage.
   

Lizenz

Unter der MIT -Lizenz verteilt. Weitere Informationen finden Sie LICENSE .