lofi music

Lofi-música?

Um projeto React 18 + NextJS, criado para se divertir. Eu estava cansado de abrir o YouTube para uma música lo-fi enquanto trabalhava?

Clique aqui para uma demonstração ao vivo!

Sobre

Lofi-Music é um aplicativo da Web que permite criar música personalizada enquanto trabalha ou estuda! Basta clicar em qualquer sons que você goste da ampla seleção para sobrepunhá -los em uma mistura personalizada.

Construído com

• Componentes estilizados
• Componentes/layout baseado
• Mais bonito para melhor legibilidade

✅ Introdução

Primeiro, clone o repositório do seu dispositivo usando o comando:

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

Em seguida, mude os diretórios para lofi-music com o comando:

 cd lofi-music

Em seguida, execute o comando a seguir para instalar todos os módulos e suas dependências:

npm install

Uso

Para executar o aplicativo no modo de desenvolvimento, execute o seguinte comando:

npm run dev

Em seguida, abra http: // localhost: 3000 (porta padrão) para visualizá -la no navegador.

Para construir o aplicativo para produção na pasta build , execute:

npm run build

❓ Instruções

• Para criar uma mistura de som , clique em uma imagem para adicioná -la aos seus sons ativos.
• Para ajustar o volume de um som individual , arraste o controle deslizante embaixo do som.
• Para ajustar o volume de todos os sons ativos , arraste o controle deslizante na parte inferior da tela sob Sounds active: .
• Para parar todos os sons , clique em Stop all .
• Para inserir o modo de tela cheia , clique no window icon no canto superior esquerdo da barra de ícone. Para sair , clique no ícone novamente.
• Para obter uma mistura aleatória de sons , clique no arrow icon na barra de ícones.
• Para alterar as cores de fundo do aplicativo, clique no gear icon na barra de ícones e selecione uma cor.
• Para obter uma mistura aleatória de sons com base no seu humor , clique no face icon na barra de ícones e selecione seu humor.

? Executar testes

Para executar os testes, execute o seguinte comando:

npm test

Para verificar a cobertura do teste (mínimo necessário 70%global), execute o seguinte comando:

npm test -- --coverage

Depois que o comando for executado, pesquise a pasta /coverage , depois /lcov-report e o Open index.html em um navegador.

Estrutura do projeto

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

? Contribuindo

Sinta -se à vontade para abrir problemas, puxar solicitações e refatorar/consertar! Este é um projeto vivo e qualquer ajuda é bem -vinda. Obrigado!

Para ver os problemas atuais, consulte a página de problemas.

Para contribuir, siga as etapas abaixo:

1. Crie um garfo deste repo.
2. Crie uma pasta no seu dispositivo e clone o repositório bifurcado nele.

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

3. Crie um ramo de recursos.

 git checkout -b new-feature

4. Cometer suas mudanças.

 git commit -m 'Added feature'

5. Empurre para o ramo.

 git push origin new-feature

6. Envie uma solicitação de tração.
   

Licença

Distribuído sob a licença do MIT. Consulte LICENSE para obter mais informações.