lofi music

lofi-music？

Funのために作成されたReact 18 + NextJSプロジェクト。機能している間、YouTubeを開くことにうんざりしていましたか？

ライブデモについては、ここをクリックしてください！

について

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参照してください。