lofi music

Lofi-Music?

재미를 위해 만들어진 React 18 + Nextjs 프로젝트. 일하는 동안 Lo-Fi 음악을 위해 YouTube를 열는 데 지쳤습니다.

라이브 데모를 보려면 여기를 클릭하십시오!

에 대한

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 참조하십시오.