A aplicação é um player de músicas desenvolvido com React aplicando os conceitos de flexbox, props, estados e hooks. Neste projeto, o maior desafio foi trabalhar com props passando informações das músicas através dos componentes, além da barra de progresso que acompanha o progresso da música
Para executar a aplicação é necessário ter o nodejs instalado na máquina e seguir os passos abaixo:
- Clonar este repositório utilizando o comando
https://github.com/alvdelci/desafio-frontend-m03-ddst12.git - Instalar as dependências do projeto
-- Para instalar as dependências do projeto vamos utilizar um gerenciador de pacotes. Por padrão, o nodejs vem com o NPM, mas recomendo a instalação do YARN com o comandonpm install -g yarn
-- Abra o terminal na pasta do projeto e execute o comandonpm install(com NPM) ouyarn install(com YARN) - Após a instalação das dependências podemos executar com o comando
npm run start(com NPM) ouyarn start(com YARN) - Ao executar o passo anterior a aplicação abrirá no seu navegador padrão, se isso não acontecer, basta abrir o navegador e acessar a url
http://localhost:3000
- As músicas podem ser tocadas clicando no cartão da música onde, ao passar o cursor, aparece um ícone de play.
- A primeira música está definida como valor inicial do play, portanto, se ela estiver aparecendo na barra de playing não poderá ser iniciada clicando no cartão, apenas pelo botão de play.
- As músicas não tocam automaticamente quando a anterior termina.
- O botão de Preview retornar as músicas até a primeira lista.
- O botão de Next avança as músicas de forma circular, ou seja, ao chegar na ultima ela avançará para a primeira e o ciclo recomeçará.
- O usuário pode interagir com a barra de progresso clicando ou arrastando para avançar e retornar o tempo da música.
- O controle de volume é iniciado por padrão no volume 3, podendo ser aumentado até o volume 10 e reduzido até o volume 0 puxando o slider.
- O áudio pode ser mutado clicando no ícone do volume.