Quer dar o primeiro passo para construir um Projeto Web de JavaScript? Nesse curso básico vou te ensinar a criar um player de música!
Aulas para criação do Projeto Web de JavaScript
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) que utilizamos na aula, preencha:
Fala impressionadores!
Você está em um dilema? Quer aprender programação porque sabe o potencial que tem, que é uma área boa, aquecida e que paga bem, mas, por outro lado, também queria relaxar e escutar suas músicas, tranquilo e sem se preocupar…
Tenho uma notícia ótima para você! Resolvi que hoje vamos fazer os dois!
Isso mesmo! Nosso primeiríssimo Projeto Web de JavaScript, vamos criar do zero um aplicativo de músicas!
Primeiro, é importante dizer que este projeto será criado no Visual Studio Code, se você não viu nossa aula ensinando a como fazer a instalação do VS Code vou deixar o link aqui, instale, é simples e gratuito.
Vamos para o Projeto Web de JavaScript?
Passo a passo:
Abra o VS Code -> vamos criar uma pasta para o nosso projeto -> clique em abrir pasta.
Crie uma pasta -> renomeie -> selecione a pasta para iniciarmos.
Após criar a pasta vai aparecer uma mensagem onde vamos selecionar “sim, confio nos autores”
Não se preocupe, este aviso é referente a pasta que nós mesmos acabamos de criar!
Nossa pasta vai guardar todos os arquivos que vamos criar para fazer esse projeto.
Este é um projeto Web, ou seja, este projeto roda na internet, como um site, por exemplo…
Quando estamos falando de projeto Web temos que pensar nas 3 principais tecnologias do sistema web que são:
Para tentar te explicar o que esses três recursos representam para o nosso projeto, vamos falar deles fazendo uma comparação.
Vamos supor que o projeto seja como um corpo humano. O corpo humano tem uma estrutura certo?
A estrutura é formada por músculos e ossos que são as bases do corpo, isso na tecnologia web é comparado com o HTML, ele é quem define a estrutura da página.
Depois temos a aparência, um corpo pode ter cabelos escuros, bigode, nariz grande ou pequeno, da mesma forma um site vai ter a sua aparência.
O CSS é quem vai trabalhar esta parte visual.
Por fim, o site executa comandos e ações, é dinâmico, tudo isso é feito através do JavaScript.
Podemos dizer que o JavaScript é a inteligência do site.
Agora que nós sabemos o papel de cada uma dessas tecnologias, vamos concordar que faz mais sentido começar pela estrutura, o HTML.
Abra o VS Code:
No canto superior esquerdo vamos clicar no ícone que está sendo indicado na imagem abaixo -> vai surgir uma barra de fórmulas -> digite “index.html” este nome é o que geralmente se usa na primeira pasta.
Uma pergunta que pode estar surgindo agora é:
Ok! Eu sei que JavaScript é uma linguagem de programação, mas e o HTML? O que é?
Essa pergunta é muito pertinente. O HTML é uma linguagem?
Sim.
O HTML é uma linguagem de programação?
Não.
HTML é o que chamamos de “MARKUP LANGUAGE” uma linguagem de descrição, ela serve para descrever a relação entre elementos.
Essa linguagem vai definir as posições, o que vem antes o que vem depois, vai definir que determinado elemento é conteúdo de outro elemento, o HTML guia a estrutura do projeto.
Como começar a escrever o HTML?
Por sorte o VS Code já tem este código pronto, precisamos apenas escrever o sinal de exclamação “!” e clicar em enter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>Perceba que o VS Code já gerou um código! Este é um código base para os HTML que você for escrever, assim você não precisa ficar reescrevendo.
Quem nunca viu este código deve estar estranhando esses blocos e tantos sinais de “menor que”, “maior que” etc.
Isso que estamos vendo são tags, todo o código HTML é escrito em tags.
Pode-se dizer que as tags são o elemento do HTML, por isso estamos vendo tantas tags no código, existem vários tipos diferentes de tags.
Não se preocupe! Isso vai ficar mais claro à medida que formos fazendo o projeto, eu só acho importante adiantar que essa tag é feita para o navegador, porque é o navegador que vai abrir a página na internet, então este código serve para o navegador se guiar.
Dito isso, a maioria dos códigos que vamos escrever vão estar dentro do body, sendo a parte do código da imagem abaixo. O que estiver dentro do body define o que irá aparecer na página.
<body>
</body>
</html>Vamos usar um exemplo com uma tag, vamos escrever <h1> logo abaixo de body como na imagem abaixo:
Assim que escrevermos o <h1> o VS Code vai completar com </h1>.
<body>
<h1></h1>.
</body>
</html>Por que o VS Code completa este </h1>?
É muito comum as tags aparecerem em pares, uma chamamos de tag de abertura e a outra tag de fechamento.
Essa é uma tag para escrever títulos, o título fica entre o <h1> de abertura e o </h1> de fechamento.
<body>
<h1>Player de música Hashtag</h1>.
</body>
</html>Dica, observe a bolinha branca ao lado do nome da pasta, esta bolinha está indicando que esta alteração que fizemos não está salva -> para salvar clique “Control + s” -> vai notar que o círculo agora mudou para um formato de x, isso significa que seu trabalho foi salvo.
Após salvar o trabalho clique com o botão direito do mouse sobre o nome da nossa pasta e em seguida clique em Open with Live Server como mostra a próxima imagem.
Quando clicarmos vamos ser direcionados para o navegador, vai se abrir uma página da web com o nosso título nela.
Esta tag <h1> não é a única que temos para trabalhar com títulos, na verdade, temos do <h1> até o <h6>:
Observe que cada tag imprimi com um tamanho de fonte diferente o título, podemos usar a que melhor se encaixa no nosso projeto.
Acrescentando a Tag <P>:
Esta tag serve para introduzir parágrafo no nosso projeto, vamos acrescentá-la e remover os títulos que usamos para exemplo:
Veja que os títulos agora são frases.
Aqui, também vou deixar esta foto do player do Spotify, esta foto vai servir como referência para nos guiar à medida que formos criando nosso player.
Estratégia de organização:
Vamos começar usando uma estratégia, olhando para esta imagem acima, quantos elementos diferentes podemos contar nela? Temos:
Vamos contar os elementos da tela, como cada tag equivale a um elemento, vamos colocar o mesmo número de tags equivalente a estes elementos.
Vamos começar colocando 11 tags no VS Code, vou te ensinar uma por uma, não se preocupe!
Acrescentando a Tag <div>:
Esta tag será a sétima que vamos colocar, acrescentando esta tag e salvando vamos reparar que ela imprime uma frase igual à tag <p> estava fazendo.
Mas e ela faz o mesmo que a tag anterior, por que devemos usar? Ou, por que não usar somente o <div>?
Vamos colocar os 11 elementos completando os que estão faltando com o <div>:
<body>
<h4>Playlist Hashtag</h4>
<p> segundo player de música hashtag</h1>
<p> terceiro player de música hashtag</h1>
<p> quarto player de música hashtag</h1>
<p> quinto player de música hashtag</h1>
<p> sexto player de música hashtag</h1>
<div> 7 player de música hashtag</h1>
<div> 8 player de música hashtag</h1>
<div> 9 player de música hashtag</h1>
<div> 10 player de música hashtag</h1>
<div> 11 player de música hashtag</h1>
</body>
</html>Agora vamos entender por que não devemos usar tantas vezes a mesma tag.
Vamos imaginar que após chegar até aqui na construção desse player você resolveu tirar umas férias, ficar um mês sem mexer no projeto.
Voltando dessas férias e retomando o projeto a primeira coisa que você vai pensar é:
Mas, por que usei esta tag? O que a terceira tag representa?
Por ser muito genérico usar muitas vezes o <div> pode trazer confusão.
Usar tags específicas é melhor, assim você entende qual a finalidade dela dentro do seu código.
Ainda pesando em organização, vamos modificar as frases que colocamos nas tags para frases que nos lembrem os passos do nosso projeto.
<body>
<h4>Playlist Hashtag</h4>
<p> capa do disco</h1>
<p> nome da música</h1>
<p> nome da banda</h1>
<p> botão de like</h1>
<p> barra de progresso</h1>
<div> botão de embaralhar</h1>
<div> voltar música</h1>
<div> play/pause</h1>
<div> avançar música</h1>
<div> repetir</h1>
</body>
</html>Pronto agora só de olhar já sabemos o que falta fazer.
Dito isso, vamos voltar para a nossa imagem de referência, observe que o primeiro elemento da imagem “Caminho Diário” podemos considerar como um título, certo?
O tamanho da letra é pequeno comparado a tag <h1>, vamos usar a tag <h4> para este elemento.
A próxima tag com a frase “Capa do disco” é apenas um lembrete do que nós queremos colocar nesta tag.
Nós queremos que a imagem da capa apareça neste espaço, vamos colocar a tag de imagem (IMG) logo após o título.
Em seguida copiamos as fotos que escolhemos para as nossas capas -> crie uma pasta no VS Code para armazenar estas imagens, (nome da pasta –> IMAGEM).
Após criar esta pasta nos só temos que arrastar as imagens para dentro da pasta ou copiar e colar.
Agora a tag de imagem vai receber uma informação adicional que é:
<img src=”/IMAGEM/IMAGEM HASH.png”></img>
O “src” significa fonte, a fonte que eu quero exibir no conteúdo de imagem.
Esta fonte é a nossa pasta”/IMAGEM onde guardamos as fotos -> /IMAGEM HASH.png” e por fim o nome da imagem dentro da pasta que queremos selecionar.
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<p> nome da música</h1>
<p> nome da banda</h1>
<p> botão de like</h1>
<p> barra de progresso</h1>
<div> botão de embaralhar</h1>
<div> voltar música</h1>
<div> play/pause</h1>
<div> avançar música</h1>
<div> repetir</h1>
</body>
</html>Colocamos nossa primeira imagem, faltam os ícones dos botões, felizmente temos uma biblioteca de ícones para nos ajudar.
Existem diversas bibliotecas de ícones, para nosso projeto vamos usar a Bootstrap icons.
Fonte: https://icons.getbootstrap.com/
Nesta biblioteca vamos ter diversos ícones para escolher.
Vamos pesquisar no site o nosso botão Play -> clique control + f -> aparecendo a barra de pesquisa escreva Play -> procure pelo botão igual ao usado na foto do nosso projeto.
Obs. Os botões estão em ordem alfabética.
Como utilizar o botão?
Vamos lá, vou ensinar de maneira simples a usar o botão, porém o próprio site ensina diversas formas.
Rolando a página para baixo vamos encontrar uma sessão de instalação, nesta sessão temos a opção CDN. Copie o link da parte de CDN e cole no nosso código como mostra as imagens abaixo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>Quando nós colocamos o link no nosso código o navegador já consegue se localizar.
Vamos voltar ao site com os ícones e selecionar os outros ícones que ainda faltam e parecem com o nosso projeto.
Assim que encontrar clique no ícone e copie o link dele.
Cole este link na tag onde marcamos o Play e Pause:
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<p> nome da música</h1>
<p> nome da banda</h1>
<p> botão de like</h1>
<p> barra de progresso</h1>
<div> botão de embaralhar</h1>
<div> voltar música</h1>
<div><i class="bi bi-play-circle-fill"></i></div>
<div> avançar música</h1>
<div> repetir</h1>
</body>
</html>Já podemos ver nosso ícone no servidor.
Conforme for colocando os ícones substitua a tag <P> por <div>. A tag <p> é mais usada para frases, por uma questão de organização todos os ícones ficarão em tags <div>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<div>Nome da música</div>
<div>Nome da banda</div>
<div><i class="bi bi-heart"></i></div>
<div>Barra de Progresso</div>
<div><i class="bi bi-shuffle"></i></div>
<div><i class="bi bi-skip-start-fill"></i></div>
<div><i class="bi bi-play-circle-fill"></i></div>
<div><i class="bi bi-skip-end-fill"></i></div>
<div><i class="bi bi-repeat"></i></div>
</body>
</html>Já colocamos todos os ícones no nosso projeto e por esta aula é só!
Fala impressionadores! Estamos na segunda aula do nosso projeto web!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) que utilizamos na aula, preencha:
Na primeira aula começamos o nosso projeto de um player de música inspirado no Spotify.
Conseguimos colocar o título, a imagem de capa da playlist e os ícones que serão nossos botões do player.
Agora vamos evoluir mais!
Ainda temos que colocar nossa barra de progresso, nome da música e nome da banda.
Se olharmos a imagem de referência vamos ver que ainda temos muito a fazer.
Vamos relembrar as tags já vimos?
<DIV>:
Observe que todas as tags parecem ter suas funções bem definidas, mas a DIV é uma tag genérica.
O que isso significa?
A tag div define uma divisão na imagem, como um retângulo, neste recorte (retângulo) está o conteúdo de dentro das tags de abertura e de fechamento.
Diferente das tags de título ou tag de Parágrafo que quando usadas imprimem uma letra maior ou uma estilização qualquer, a tag div apenas estabelece a divisão, sem definir nenhum estilo próprio no conteúdo.
Qualquer estilo que houver na div foi estabelecido por quem a usa, não é um estilo definido previamente pela tag, além disso, podemos colocar diferentes conteúdo dentro dessa tag.
É por isso que a div é considerada uma tag genérica e versátil.
Tags de referência:
Agora vamos voltar as 11 tags que abrimos aula passada, nós contamos quantos elementos havia na nossa foto de referência do player, contamos 11 elementos e por isso abrimos 11 tags.
Apesar de termos conseguido colocar os ícones ainda vamos ter que alinhá-los, ainda está muito diferente da imagem original.
Hoje vamos trabalhar mais o nosso HTML e vamos fazer isso usando a tag <div>.
Como eu disse, a <div> é uma tag de divisão da tela e nós vamos precisar fazer algumas subdivisões para agrupar elementos que queremos colocar juntos.
Vamos começar focando em dois lugares selecionados na imagem abaixo, queremos que estas seções do nosso projeto tenham seus elementos organizados.
Não tem mistério, não se preocupe! Vamos fazer passo a passo juntos!
Exemplo:
O que vamos fazer é colocar as tags que contêm os elementos que queremos agrupar todos em uma div, é simples, só precisamos abrir uma tag de início da div e colocar dentro dela os elementos (tags) que ficarão incluídas na div, depois é só fechar com a tag de fechamento da div.
Observe na imagem:
Siga o exemplo da imagem acima.
Quando fazemos esta modificação no código usando a div não temos nenhuma alteração no que está sendo impresso no navegador, porque a div está apenas fazendo a delimitação do espaço sem executar nenhuma ação ou formatação nova.
Quando temos um ou mais elementos dentro de outro, chamamos o elemento externo de pai e os elementos internos de filhos, consequentemente chamamos os elementos internos de irmãos entre si.
Essas definições são importantes porque a organização dos elementos filhos irá ser definida pelo elemento pai.
Na aula passada explicamos que projetos web existem com base em três principais tecnologias, são elas:
Tudo que fizemos até agora foi o HTML que é a estrutura da página, a partir de agora queremos formatar os botões, mexer na aparência, para isso vamos começar a usar o CSS.
Para isso vamos criar um arquivo para o CSS -> clique em Novo arquivo e escreva na barra de fórmulas Style.css.
Agora precisamos fazer o HTML identificar que os estilos desta página vão ser pegos deste arquivo externo, o CSS que acabamos de criar.
Como vamos fazer isso?
Coloque no seu código o link <link rel”stylesheet” href=”/style.css> onde está sendo inserido na imagem abaixo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<div>Nome da música</div>
Vamos explicar melhor para que você entenda esta linha que acabamos de acrescentar.
Feito isso, não se esqueça de salvar!
Agora nossa página reconhece o conteúdo do arquivo CSS, isso significa que tudo que nós estilizarmos no CSS vai aparecer no HTML.
Tratando a imagem de fundo:
Vamos retornar para a nossa foto de referência e ver como está a nossa imagem de fundo:
Observe que a nossa imagem de fundo não se limita apenas a um elemento da tela, a cor de fundo compreende todos os elementos que temos na tela, certo?
Sendo assim, precisamos colocar a cor de fundo em uma posição que compreenda todas as tags.
Esta posição inicial e final mais abrangente é a do body, o corpo do nosso código.
Todas as nossas tags estão dentro no body lembra?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<div>
<div>Nome da música</div>
<div>Nome da banda</div>
<div><i class="bi bi-heart"></i></div>
</div>
<div>Barra de Progresso</div>
<div>
<div><i class="bi bi-shuffle"></i></div>
<div><i class="bi bi-skip-start-fill"></i></div>
<div><i class="bi bi-play-circle-fill"></i></div>
<div><i class="bi bi-skip-end-fill"></i></div>
<div><i class="bi bi-repeat"></i></div>
</div>
</body>
</html>Dentro do arquivo Style.css que criamos vamos escrever body e abrir chaves -> vamos escrever background-color: e por enquanto, escolha a sugestão de cor que aparecer.
Nós queremos a mesma cor da imagem de referência, para conseguir a mesma cor vou te ensinar uma dica!
Abra o Paint no seu computador e insira nele a imagem de referência:
1º Clique no seletor de cor e depois na cor de fundo na nossa imagem;
2º Use o seletor de cor no ponto mais escuro da imagem;
3º Após utilizar o seletor na cor da imagem, ela vai aparecer no ícone Cor1;
4º Clique no editor de cores para visualizar os números que correspondem a cor (RGB).
Após encontrar os números do RGB vamos colocar no nosso arquivo CSS dentro do body -> Background-color: □rgb(25, 35, 37).
A cor do fundo do nosso projeto agora está parecida com a da imagem de referência, mas repare que na imagem a cor está em gradiente, ela vai escurecendo à medida que desce.
Para fazer isso primeiro vamos começar a enxergar a cor de fundo não como uma cor, mas como uma imagem, isso é importante para entender o processo.
Dito isso, vamos mudar o código que está dentro do body, vamos trocar a palavra color para image.
Background-color: □rgb(25, 35, 37).
Background-image: □rgb(25, 35, 37).
Na opção de imagem temos mais opções de formatação, podemos escolher colocar o linear-gradient para a imagem, para isso, só precisamos informar qual a cor inicial do gradiente e a cor final.
A cor final, a mais escura da nossa imagem de referência, nós já temos o rgb dela que pegamos no Paint lembra?
Vamos voltar ao Paint para pegar o rgb da cor inicial, a cor mais clara da nossa imagem de referência.
Novamente com o seletor de cor -> clique na cor mais clara do início da imagem e obtenha o número do rgb.
O código CSS tem que receber a cor inicial e final apenas, feito isso o gradiente fica pronto!
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
)
}Observe que a cor final que estava fora dos parênteses do gradiente linear nós colocamos dentro dos parênteses como segunda opção.
A Cor inicial vem em primeiro lugar seguida da vírgula. Deixe seu código como na imagem acima, com as informações de cores indentadas ao background-image.
Obs. Indentar ou indentação significa “um espaço no começo de uma linha escrita ou de um parágrafo”.
Indentar significa colocar este espaço entre a margem e o início do código, estes espaços devem ser respeitados, por isso deixe como na imagem acima.
Imagem repetida:
Nossa imagem está em gradiente agora, mas observe que o gradiente está se repetindo assim que termina o primeiro temos outro logo abaixo.
Isso acontece porque o Body tem essa programação por padrão, de repetir o que está dentro dele.
Para corrigir isso vamos acrescentar uma nova propriedade ao body.
Para encerrar a propriedade anterior (cor) vamos colocar um ponto e vírgula “;”, sempre vamos usar o ponto e vírgula para encerrar uma propriedade.
Agora vamos acrescentar o height (altura) 100vh -> vh significa vertical height (altura vertical).
Em outras palavras, da altura vertical que temos disponível na página queremos que o body ocupe 100%.
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
}Nosso projeto está cada vez mais próximo do objetivo!
Agora vamos acrescentar dois elementos ao body:
Color white:
Vamos colocar branco como padrão, porque a maioria dos elementos do nosso player são brancos.
Para isso acrescente color: □white;
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
color: white;
}Font-family:
Vamos acrescentar também uma fonte para o nosso projeto, quando escrevemos Font-family no body ele já nos entrega algumas opções:
Para este projeto vamos escolher -> Verdana, Geneva, Tahoma, sans-serif.
O Spotify utiliza a fonte sans-serif que é a última da lista de opções que escolhemos, ou seja, nesta lista ela será usada apenas se não houver as primeiras opções, não é isso que queremos…
Para ajustar é simples, basta apagar as fontes que precedem a sans-serif e deixar apenas a que queremos como opção.
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
color: white;
font-family: sans-serif;
}Não se esqueça de salvar as alterações (control + s).
Agora, precisamos definir algo muito importante!
Como o body deve se comportar em relação aos elementos que estão dentro dele?
Display flex:
No código vamos colocar Display: flex;
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
color: white;
font-family: sans-serif;
display: flex;
}Assim que você salvar observe a mudança que vai acontecer no projeto no navegador!
Isso mesmo! Ele mudou a disposição de todos os elementos no projeto.
Agora o programa respeita a organização do padrão flex que é uma organização em linha.
Nós podemos mudar este padrão para coluna, afinal visualmente os elementos dispostos um abaixo do outro estavam muito mais parecidos com nosso display.
Para isso vamos escrever na próxima linha -> flex-direction: column;
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
color: white;
font-family: sans-serif;
display: flex;
flex-direction: column;
}Salve novamente e veja que os elementos voltaram a estar dispostos em coluna.
Certo, mas se voltamos ao que era, por que fizemos essas mudanças?
Bom, observe que a imagem cresceu, que todos os elementos aumentaram, observe também que quando nós minimizamos a página ou alteramos seu tamanho a imagem também se ajusta a essa modificação, ela passa a se adequar, se ajustar de forma proporcional.
É o que chamamos de site responsivo, se você já teve que usar um site pensado para o computador e que não se ajusta a tela do celular, então você entende a importância do que acabamos de fazer, tornamos nosso display um display-flex e isso é ótimo!
Fala Impressionadores! Hoje vamos para a terceira aula do nosso Curso Básico de JavaScript!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Nessa aula vamos abordar a tag de divisão (tag div), vamos fazer alguns ajustes nos atributos da tag, ou seja, vamos atribuir id e classe as div’s para formatar nosso display!
Atribuindo tanto o id quanto a classe no CSS, vamos fazer algumas alterações de estilo para um id específico ou para uma classe que geralmente engloba mais de um elemento.
Assim fica mais fácil fazer os ajustes de estilo para a construção do nosso player.
Além disso, vamos alinhar itens no CSS para que o nosso projeto fique bem ajustado e com um aspecto visual melhor!
Vou deixar aqui a imagem de como ficou o código na última aula e a partir dele vamos evoluir mais no nosso projeto!
Na última aula nós delimitamos alguns elementos da capa do nosso display dentro de duas div’s para tratar esses grupos de elementos.
Fizemos isso para conseguir organizar as posições dos nossos ícones da capa nos lugares certos.
Dentro da div podemos colocar informações adicionais para deixarmos mais específico como foi feito na imagem e título.
As informações adicionais que colocamos na tag recebem o nome de atributos da tag.
Temos dois atributos muito importantes que vamos usar nesse processo:
ID: O ID é como o documento, como o RG ou CPF da nossa tag, portanto é único e podemos usar para modificar uma tag específica.
Classe: A classe não é específica como o ID, ela é o nome que damos a nossa tag, mas outras tags podem ter o mesmo nome, isso é bom porque quando quisermos fazer uma mudança em uma classe específica podemos fazer isso em todas as tags de uma vez.
O ID e a Classe são complementares neste sentido, o ID me permite trabalhar com a tag individualmente e a classe com um conjunto de tags.
ID:
Para colocar a ID na div só precisamos escolher um nome, vamos colocar below cover (abaixo da capa) na primeira e button-container (recipiente inferior) na segunda.
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div>Nome da música</div>
<div>Nome da banda</div>
<div><i class="bi bi-heart"></i></div>
</div>
<div>Barra de Progresso</div>
<div id = "button-container">
Agora que definimos o ID no código HTML podemos inseri-lo no código CSS.
Para isso vamos colocar o # antes do nome da tag e abrir colchetes:
#below-cover {
display: flex;
flex-direction: row;
}
Aplicando o display flex e flex-direction na div below-cover vamos ver que o nome da música e o nome da banca vão ficar alinhados um ao lado do outro.
Como queremos um abaixo do outro, vamos fazer mais uma subseção na nossa tag, deixando esses dois elementos dentro de outra div.
Feito isso, vamos definir um id para esta nova div → song-info (informações da música).
<body>
<h4>Playlist Hashtag</h4>
<img src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div>Nome da música</div>
<div>Nome da banda</div>
</div>
<div><i class="bi bi-heart"></i></div>
</div>Veja que agora o nome da banda aparece abaixo do nome da música!
Por que isso acontece?
Isso acontece porque a div below-cover que é display flex vai atuar sobre os elementos que são filhos dela, porém, os elementos nome da música e nome da banda não são mais filhos, agora com a subdivisão são netos.
Quem agora determina seu comportamento é a nova div pai song-info.
Precisamos fazer mais uma alteração importante ainda no código CSS:
Vamos acrescentar e salvar → justify-content: space-between
O justify-content vai dizer como os elementos têm que se organizar no eixo principal do display flex que é como uma linha, então, os elementos estão organizados nessa linha.
A partir do justify-content eles vão se organizar garantindo um espaço entre eles, ou seja, space-between (espaço entre).
Por fim, já que justify-content (justificar-conteúdo) está organizando os elementos na direção principal, a propriedade que vai organizá-los na vertical e no centro da div é a align-items (itens de alinhamento) center; Observe o código:
body {
background-image: linear-gradient(
rgb(59,88,93),
rgb(29,40,42)
);
height: 100vh;
color: white;
font-family: sans-serif;
display: flex;
flex-direction: column;
}
#below-cover {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}Agora observe no navegador que o botão de like ficou mais próximo da posição que queremos.
Feito isso, vamos agora mexer no estilo da nossa outra div, a botton-container que é pai do outro conjunto de botões que queremos organizar.
#below-cover {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#button-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}O processo para acrescer esta div no CSS é o mesmo que usamos para o #below-cover:
Note que a diferença é que colocamos space-around (espaço ao redor) neste conjunto de botões e esta é a única diferença de formatação do conjunto anterior, observe no display a diferença:
Agora conseguimos deixar os botões com um alinhamento mais próximo da nossa imagem de referência! Porém, um pouco menores, mas podemos corrigir isso, observe o exemplo original:
Como ajustar o tamanho dos botões?
No nosso código temos uma div para cada um desses botões certo?
Vamos precisar criar um ID para cada uma delas, isso nos permite tratar individualmente cada botão.
</div>
<div>Barra de Progresso</div>
<div id = "button-container">
<div id="shuffle"><i class="bi bi-shuffle"></i></div>
<div id="previous"><i class="bi bi-skip-start-fill"></i></div>
<div id="play"><i class="bi bi-play-circle-fill"></i></div>
<div id="next"><i class="bi bi-skip-end-fill"></i></div>
<div id="repeat"><i class="bi bi-repeat"></i></div>
</div>Classes:
Agora além de incluir os ID’s, vamos incluir Classes também. Por que incluir as classes?
Se não colocarmos as classes vamos ter que aumentar os botões a cada um, já que vamos aumentar todos eles igualmente, a classe nos permite fazer isso de uma única vez, lembra?
Observe que no caso das classes, inserimos todas com o mesmo nome, alterar esta classe significa alterar todos os botões que possuem a mesma classe → class = ”button”.
Vamos revisar todas as tags e endentações antes de prosseguir? Certifique-se de que o código tem todas as alterações feitas até agora…
Definindo o estilo da Class Button – CSS:
Quando vamos definir o estilo de uma classe começamos colocando um ponto, depois abrimos colchetes:
Nossa fonte será 1,5em, sendo 1,5 vezes o tamanho original.
Para o botão do like este tamanho ficou bom.
Para os botões do meio, este tamanho parece pequeno, vamos separar esses botões da classe button e criar uma classe para eles que precisam ser maiores.
.button-navigate com font-size 2em – Para as setas voltar e embaralhar.
.button-biggest com font-size 3em – Para o play.
Perceba que agora que aumentamos os tamanhos, os botões parecem estar desalinhados.
Vamos alinhar acrescentando o align-items: center na div pai button-container, assim alinhamos todos os botões de uma única vez, porque esta div engloba todos os botões.
Verifique o código final antes de passar para a próxima aula ok?
Estamos cada vez mais próximo do nosso player de música personalizado! Nesta aula conseguimos aplicar ID e Classes e efetuar formatações nos nossos botões…
Fala impressionadores! Estamos na quarta aula do nosso projeto web!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Hoje vamos para a quarta aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web!
Lembrando que a ideia desse projeto é aprender como construir um player de música igual ao Spotify, você vai poder construir o seu player com seu estilo próprio!
Nessa aula eu quero te mostrar como alinhar elementos no CSS, como inserir margem no CSS, como fazer alteração de cor (que já vimos em outras aulas), como colocar fonte em negrito no CSS.
Além disso, vamos ver como criar uma barra de progresso no CSS para a música, como temos em todos os players.
Vamos conhecer a propriedade inherit no CSS, para herdar as características da div pai desse elemento e como aplicar.
Como estamos nos guiando por uma imagem de referência, vou colocar aqui tanto a referência como ao lado onde nós paramos:
Vamos abrir a nossa imagem de referência no Paint, porque vamos precisar utilizar durante a aula…
Note que os botões da imagem de referência estão maiores que os nossos.
Como o da imagem de referência está melhor, vamos aumentar mais os botões do nosso projeto.
Aumentando os botões:
Vamos voltar no código CSS e ajustar o tamanho dos botões nas classes criadas na aula passada.
Ajustamos o tamanho para as classes button-navigate = 3em e button-biggest = 4em:
.button-navigate {
font-size: 3em;
}
.button-biggest {
font-size: 4em;
}Outro ponto que você já deve ter reparado é o tamanho da nossa imagem, esta enorme…
Nosso objetivo é deixar a imagem fixa e centralizada, para isso vamos fazer ajustes no código:
HTML:
Vamos criar um ID para a tag da imagem, nossa ID vai se chamar cover:
<body>
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div>Nome da música</div>
<div>Nome da banda</div>
</div>Com o ID da tag criado podemos referenciar a tag no CSS e aplicar os estilos assim como fizemos na aula 3.
Como temos uma imagem quadrada vamos colocar o width que é a largura → 450 pixels.
Obs. Para chegar neste tamanho apenas testei vários tamanhos até um que chegou próximo à imagem de referência, ok, não tem segredo.
#cover {
width: 450px;
}Observe que na imagem de referência o alinhamento está na vertical e na nossa imagem estão todos alinhados à esquerda.
Não vamos apenas concluir que temos que ajustar, temos também que observar o lugar certo para ter menos trabalho.
O lugar que compreende todos os elementos é o Body lembra? O corpo do nosso código que envolve todas as div’s. É Nele vamos fazer esse ajuste.
O alinhamento está em coluna, vamos acrescentar o align-items: center;
body {
background-image: linear-gradient(
rgb(59, 87, 94),
rgb(25, 35, 37)
);
height: 100vh;
color: white;
font-family: sans-serif;
display:flex;
flex-direction: column;
align-items: center;
}Ao fazer esse ajuste observe a imagem do nosso projeto:
A foto agora está centralizada, mas como o body compreende todas as tags, nossos botões estão todos apertados um sobre o outro…
Para resolver isso temos que fazer com que Body deixe de ser pai das div’s onde queremos ter mais espaçamento.
Simplificando → vamos criar uma div e uma classe imediatamente após o Body, vamos chamar de music-container.
<body>
<div class = "music-container">
<h4>Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div>Nome da música</div>
<div>Nome da banda</div>
</div>
<div id="like" class ="button"><i class="bi bi-heart"></i></div>
</div>
<div id="progress-bar"></div>
<div id = "button-container">
<div id="shuffle" class="button"><i class="bi bi-shuffle"></i></div>
<div id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></div>
<div id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></div>
<div id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></div>
<div id="repeat" class="button"><i class="bi bi-repeat"></i></div>
</div>
</div>
</body>
</html>Agora o espaçamento dos ícones vai seguir o da imagem que temos no projeto! Que é o maior espaçamento do retângulo:
Vou colorir de amarelo agora apenas para deixar estas limitações e mudanças mais visuais e para você enxergar o que o código está fazendo.
Perceba que todos os elementos se guiam pelo tamanho da imagem e que nossa imagem já está com os botões mais próximos da referência que temos…
Feito isso vamos aprender a definir espaçamentos entre os elementos.
Observe que o título está alinhado à esquerda, para corrigir vamos criar um ID no HTML e tratar no CSS como já estávamos fazendo:
HTML:
<body>
<div class = "music-container">
<h4> id="playlist-title">Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div>Nome da música</div>
<div>Nome da banda</div>CSS:
}
#playlist-title {
display: flex;
flex-direction: row;
justify-content: center;
margin: 1em 0 4em 0;
}Lógica do espaçamento:
Observe que na definição de margem na foto acima temos 4 valores:
Margin: 1em 0 4em 0.
As margens são definidas no sentido horário, ou seja, o primeiro valor corresponde a meio-dia no relógio, imagine que o texto Playlist Hashtag está no centro do relógio, meio-dia é a distância para cima, o segundo número corresponde às 3 horas, ou seja, a distância a direita, as 6 horas a distância da margem para baixo e as 9 horas a distância a esquerda.
Margin: 1em 0 4em 0, neste caso colocamos apenas um distanciamento em cima 1em e 4em para baixo, as demais estão zeradas porque o texto já estava centralizado.
Vamos ajustar o distanciamento abaixo entre a foto e o nome da música/nome da banda, vamos usar a margem na classe below-cover que define esses botões.
#bellow-cover {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 3em 0 1em 0;
}
Fazendo isso você vai notar que o espaço já melhora colocamos 3em em cima e 1em em baixo.
Já ajustamos o espaço, vamos agora ajustar o tamanho da fonte, comparando com o padrão o nome da banda e o nome da música estão com fontes muito pequenas.
No código HTML vamos seguir o mesmo padrão, primeiro criamos a ID novas para essa tag e depois referenciamos no CSS e formatamos, nesse caso, as fontes:
HTML:
<body>
<div class = "music-container">
<h4>Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div id="song-name">Nome da música</div>
<div id="band-name">Nome da banda</div>CSS:
#song-name {
font-size: 1.5em;
font-weight: bolder;
}O nome da música além de maior, vamos deixar em negrito usando o weight e bolder:
Weight = peso
Bolder = negrito
Cores dos ícones:
Observe que o nome da banda, o like e outros pequenos elementos da tela tem uma cor cinza?
São detalhes, mas é importante aprender como modificar as cores de elementos específicos.
O primeiro passo é descobrir qual é essa cor?
Vamos utilizar o conta-gotas do Paint para descobrir o RGB dela como na aula passada.
Obs. Utilize a lupa no Paint para ampliar a imagem.
Vamos definir a classe no CSS, lembrando que como ainda não foi criada a classe no HTML não vai surtir efeito ainda, vamos apenas fazer a ordem inversa…
#song-name {
font-size: 1.5em;
font-weight: bolder;
}
.light-color {
color: rgb(120, 132, 134);
}Criamos a classe light-color e colocamos nela os números do RGB correspondentes a nossa cor.
Agora vamos ao HTML definir quais div’s vão receber esta definição de classe:
HTML:
<body>
<div class = "music-container">
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<div id = "below-cover">
<div id="song-info">
<div id ="song-name">Nome da música</div>
<div id ="band-name" class="light-color">Nome da banda</div>
</div>
<div id="like" class ="button light-color"><i class="bi bi-heart"></i></div>
</div>
<div id="progress-bar">Resultado:
Agora que já ajustamos esses detalhes, vamos começar nossa barra de progresso!
Até agora só temos a div que corresponde a ela, vamos dar a essa div um ID:
HTML -> ID
<div id="progress-bar">barra de progresso</div>
<div id = "button-container">
<div id="shuffle" class="button"><i class="bi bi-shuffle"></i></div>
<div id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></div>
<div id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></div>
<div id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></div>
<div id="repeat" class="button"><i class="bi bi-repeat"></i></div>
</div>Podemos manter o nome barra de progresso por hora apenas para servir de exemplo, mas a ideia é substituí-lo pela barra assim como fizemos para os demais ícones.
Criada a ID vamos para o CSS:
CSS ⇾ ID progress-bar
.light-color {
color: rgb(120, 132, 134);
}
#progress-bar {
background-color:rgb(120, 132, 134);
}Na imagem de referência a cor do fundo da barra é o mesmo tom de cinza do nosso like.
Por isso estamos usando a mesma cor da classe acima.
Por que nós simplesmente não usamos a classe que já temos com essa cor?
A diferença é que na classe estamos usando o color que muda a cor do elemento, enquanto no ID estamos usando o background-color que muda a cor de fundo correspondente ao retângulo que abrange a div que estamos tratando.
Observe:
Agora o fundo de Barra de progresso está cinza.
Obs. Se no HTML retirarmos a frase barra de progresso vamos ter a impressão de que o espaço sumiu porque a cor cinza vai sumir, mas, na verdade, existe um ajuste automático em relação ao que está escrito na div, sem que haja nada escrito o espaço some e temos a impressão de que não está ali.
Como podemos manter o espaço mesmo sem ter nada escrito?
#progress-bar {
background-color:rgb(120, 132, 134);
height: 3px;
width: 100%;
border-radius: 15px;
}Temos que aprender novos recursos para isso, vou passar de maneira simplificada para que serve cada um:
Height = Corresponde a uma altura fixa que aqui definimos com 3pixels.
Width = Corresponde ao tamanho horizontal da nossa barra, podemos aqui definir se ela vai só até o meio da tela 50% ou a barra completa 100%.
Border-radius = Este é para arredondar as bordas, nossa barra de progresso não é reta nas bordas na imagem original, por este motivo arredondados as bordas em 15pixels.
Div filha:
Esta barra que acabamos de fazer corresponde ao fundo cinza da barra que vemos na imagem de referência, por cima temos uma barra de igual tamanho, só que branca, esta é a barra que irá aumentar conforme a música toca.
Para fazer esta outra barra vale lembrar do conceito pai e filho que sempre abordamos aqui, esta barra é similar a primeira cinza que fizemos, ela herda alguns aspectos da anterior.
Por este motivo vamos criar uma div dentro da div current-bar (barra de progresso anterior) esta div (filha) começa e termina dentro da div (pai) current-bar.
Vamos chamar de current-progress!
HTML:
<div id="progress-bar">
<div id = "current-progress"</div>
</div>
<div id = "button-container">
<div id="shuffle" class="button"><i class="bi bi-shuffle"></i></div>
<div id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></div>
<div id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></div>
<div id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></div>
<div id="repeat" class="button"><i class="bi bi-repeat"></i></div>
</div>CSS:
#progress-bar {
background-color:rgb(120, 132, 134);
height: 3px;
width: 100%;
border-radius: 15px;
}
#current-progress {
background-color: white;
height: inherit;
width: 50%;
border-radius: inherit;
}A nova barra herda alguns aspectos da anterior que é sua div pai, como o height que é sua altura e o arredondado da borda do retângulo, esses elementos foram marcados como inherit (Herdeiro).
Para a cor definimos o branco porque esta barra deve se destacar da anterior e por enquanto vamos deixar como se tivesse percorrido 50% da barra cinza…
Observe que o espaço da barra de progresso para os botões de navegação está muito curto também.
Vamos ajustar este espaço em progress-bar podemos usar a margem → margin-bottom: (esta opção corresponde a margem de baixo especificamente).
Vamos deixar um espaço de 1em:
#progress-bar {
background-color:rgb(120, 132, 134);
height: 3px;
width: 100%;
border-radius: 15px;
margin-bottom: 1em;
}
#current-progress {
background-color: white;
height: inherit;
width: 50%;
border-radius: inherit;
}Espaço entre o botão e a barra aplicado:
Feito isso, vamos encerrar esta aula, na próxima aula já vamos colocar alguns processos do nosso display para funcionar!
Já repassamos métodos importantes e estamos quase finalizando a nossa barra.
Fala Impressionadores! Hoje vamos para a quinta aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web JavaScript!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Nessa aula eu vou começar te explicando o que é DOM (document Object Module) e como o JavaScript manipula o DOM para deixar a página dinâmica.
Feito isso vamos criar a tag script (onde vamos fazer a utilização do JavaScript)!
Vamos falar também sobre o conceito de variável no JavaScript, sobre a tag de áudio, sobre o que é um evento em JavaScript e, por fim, sobre o conceito de função.
Com isso vamos conseguir adicionar nossa música dentro do projeto e vamos atribuir comando ao botão play no JavaScript para poder tocar a nossa música!
Isso mesmo! Até o fim dessa aula vamos apertar o play e escutar nossa música!
Dessa forma o nosso player vai ficar cada vez mais parecido com um player de música real, só que você vai poder modificá-lo de acordo com sua necessidade, ou seja, pode criar o seu próprio estilo no player!
E aí? Curioso para colocar seu player para funcionar?
Vamos para a aula! O que é o DOM?
Quando o navegador lê o seu HTML, linha por linha, ele entende como deve montar a página.
Esse entendimento do navegador, o que faz com que o navegador entenda é o que chamamos de DOM.
Por que isso é tão importante?
Importa, porque o JavaScript só é bom, por ter a capacidade de manipular o DOM. É dessa forma que ele acrescenta dinamismo a página!
É como se existisse uma receita no DOM e o JavaScript tivesse a capacidade de acrescentar ou retirar ingredientes.
Vamos criar arquivo e fazer na prática!
No espaço acima, nomeie o arquivo → Script.js
É necessário colocar o .js no final para indicar ser um arquivo JavaScript, porém o nome é opcional.
HTML:
No HTML, logo acima do último body, vamos criar um tag script src.
Src = serve para que você aponte para a tag o conteúdo que é relevante.
</div>
<div id = "button-container">
<div id="shuffle" class="button"><i class="bi bi-shuffle"></i></div>
<div id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></div>
<div id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></div>
<div id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></div>
<div id="repeat" class="button"><i class="bi bi-repeat"></i></div>
</div>
</div>
<script src=""></script>
</body>
</html>O conteúdo que vamos colocar como relevante no src é justamente o arquivo JavaScript que acabamos de criar.
Entre as aspas vamos acrescentar uma barra e escolher dentre as opções que vão surgir, escolha o arquivo Script.js.
</div>
</div>
<script src="/script.js"></script>
</body>
</html>A partir de agora o nosso código está olhando para um arquivo que é JavaScript.
Obs. Note que o arquivo JavaScript foi colocado no final, no último body, isso porque se colocarmos no início ele vai gerar um atraso no carregamento da página, usuários impacientes podem desistir da página por este motivo, é bom sempre tomar este cuidado.
Conceito de variável:
Para explicar variável vamos compará-la a uma caixinha, onde armazenamos informações, para cada caixinha nós vamos ter uma etiqueta, uma identificação.
Quando quisermos usar esta caixinha vamos apenas nos referir a ela pelo nome da “etiqueta”.
Passo a passo:
Vamos começar a modificar nosso código corrigindo o nome da nossa música, afinal, não queremos o nome, queremos que toque a música.
Vamos criar a variável → nome songName
Existem duas palavrinhas importantes para nós e ainda faltam nessa linha de código:
Neste caso vamos usar o Const porque temos que manter a referência para esta div até o fim.
É como se tivéssemos um caderno limitado a pág. 1, só podemos usar esta página, mas, dentro dela, podemos escrever livremente, isso que o Const está fazendo.
const songName = document.getElementById("song-name");Agora vamos acessar as características da tag SongName para isso vamos colocar a tag + ponto + característica:
songName.innertext = “As You Were”;
Nossa variável songName está recebendo um texto interno que é o nome da música da nossa playlist.
const songName = document.getElementById("song-name");
songName.innerText = 'As You Were';Observe que o JavaScript já fez a primeira mudança no nosso display, na nossa imagem do display apareceu o nome da música, mesmo que no HTML ainda esteja o nome genérico a playlist se modificou devido ao JavaScript.
Criando nossa pasta de música:
Chegou o momento tão esperado! Vamos criar nossa pasta de música!
Primeiro vamos criar a nova tag no HTML, comece a escrever áudio e aperte o tab que o VS Code completa o restante.
<body>
<div class = "music-container">
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<audio src=""></audio>
<div id = "below-cover">
<div id="song-info">
<div id ="song-name">Nome da música</div>
<div id ="band-name" class="light-color">Nome da banda</div>Agora vamos criar uma pasta para referenciar na tag áudio, observe que temos o src que já pede essa referência.
Vamos criar uma pasta com o nome song.
Para dentro da nova pasta, arraste do seu computador as músicas de sua preferência.
Depois do src vamos colocar a pasta e a música que queremos separados pela barra /.
Também precisamos dar a tag um ID para fazer as associações no JavaScript.
Observe na imagem:
<body>
<div class = "music-container">
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover' src="/images/as_you_were.webp"></img>
<audio id='audio' src="/song/as_you_were.mp3"></audio>
<div id = "below-cover">
<div id="song-info">
<div id ="song-name">Nome da música</div>
<div id ="band-name" class="light-color">Nome da banda</div>Feito isso, vamos criar no JavaScript mais um Const para o ID áudio.
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
songName.innerText = 'As You Were';
song.play();
song.pause();Logo abaixo vamos associar o nome da música “As You Were” da nossa pasta a nossa tag songName usando o .innerText.
Feito isso, quando escrevermos o song.play(); logo abaixo, a música já começa a tocar!
Associar a música a tag ou a variável não vai fazer com que ela toque automaticamente, para isso é necessário o play e logo abaixo o pause para encerrar.
Mas agora, já conseguimos ver nosso player funcionando!
Não está funcionando como queremos ainda, precisamos que toque quando clicarmos no botão play do nosso player.
Vamos fazer isso agora?
Queremos associar o song.play com o nosso botão de play:
Antes de fazer isso, vamos fazer uma alteração que é de bom-tom para a construção de sites melhores, a div é uma tag genérica lembra?
Sempre que pudermos, vamos usar uma tag específica!
Vamos alterar as tags dos botões para uma tag específica, vamos trocar div por button.
Selecione o primeiro div da sequência de botões → clique no atalho control + D várias vezes até selecionar todas as tags que queremos modificar.
Feito a seleção apague a primeira div e escreva button → após dar enter todas as tags selecionadas vão se atualizar automaticamente.
<div id = "button-container">
<button id="shuffle" class="button"><i class="bi bi-shuffle"></i></button>
<button id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></button>
<button id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></button>
<button id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></button>
<button id="repeat" class="button"><i class="bi bi-repeat"></i></button>
</div>Não se esqueça de modificar também o botão de like mais acima no código!
Mudando a tag para button, perceba que o estilo dos botões mudaram, tags especificas aplicam estilo, lembra?
Vamos corrigir isso…
CSS:
Vamos no CSS aplicar um estilo ao button, para isso vamos usar alguns conceitos da aula passada:
button {
background-color: inherit;
color: inherit;
border: none;
}Inherit: Serve para herdar a formatação da div pai, vamos usar para a cor e o background-color (cor de fundo).
None: significa nenhum, vamos usar para retirar as bordas.
Conceito de Evento e função:
O que é um Evento?
Imagine que você esta em um evento, um churrasco, e está com fome. Neste evento você conhece o churrasqueiro e pede para ele te avisar assim que o churrasco sair…
O “evento” consiste no ato do churrasqueiro te avisar, logo em seguida o agir foi você ir até o churrasco.
Por que isso é importante?
É importante porque o DOM emite eventos, isso mesmo um exemplo disso é quando clicamos nos botões, o DOM avisa quando nós fazemos isso.
Só precisamos fazer com que exista uma ação após este evento.
Função:
A função é uma ação, consiste em um passo a passo, por exemplo, após ser avisado do churrasco a ação poderia ser → sair de onde você está → pegar um prato → ir à churrasqueira → pegar o churrasco e comer.
Esta seria uma ação possível para o exemplo que passamos.
Vamos criar mais um Const para o botão play e uma função:
Const:
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
const play = document.getElementById("play");Função:
Vamos substituir nosso play e pause pela função playSong().
Esta função agora está somente executando o play.
Agora vamos dar ao botão a capacidade de realizar o evento, para isso vamos ter que passar 2 informações:
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
const play = document.getElementById("play");
songName.innerText = 'As You Were';
function playSong(){
song.play();
}
play.addEventListener('click', playSong);Dentro dos parênteses vamos passar essas duas informações, o evento é o ato de clicar → click e depois desse evento a ação é nossa função → playSong.
Salve e agora, clique no botão do seu player! Nosso play está funcionando!
Fala Impressionadores! Hoje vamos para a sexta aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web JavaScript!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Nessa aula eu vou te mostrar o Query selector no JavaScript que é um seletor de lista, que vai ser responsável pela seleção do nosso botão de play e do botão de pause (que vamos adicionar).
Além disso, vou te mostrar 2 códigos importantes, estes códigos vão trocar o botão de play pelo pause quase que simultaneamente.
Assim vamos poder fazer a alteração entre os botões de play e pause para que de fato fique com a cara de um player!
Nós já tínhamos uma função para dar o play na música, então vamos criar uma função para pausar a música no JavaScript.
Ainda quero falar sobre o atributo alt no HTML, sendo um texto alternativo. Vamos aprender como criar array em JavaScript. Esse array vai servir para armazenar as nossas músicas, ou seja, é basicamente a nossa playlist!
Preparado! Vamos para o nosso Projeto Web de JavaScript!
CSS
Vamos acrescentar um seletor no nosso Play.
O que são seletores?
Quase tudo o que trabalhamos são seletores, por exemplo:
.button = sinaliza que é uma classe
#Button = sinaliza que é um ID
Ambos são seletores, quando pedimos para o Play buscar um seletor ele pode buscar tudo o que está submetido ao play, dentro do play, neste caso, dentro de Play no HTML só temos o ícone do botão.
O seletor precisa de uma indicação do que queremos buscar, podemos colocar “bi” que é o começo do código como a indicação.
HTML
<div id = "button-container">
<button id="shuffle" class="button"><i class="bi bi-shuffle"></i></button>
<button id="previous" class="button button-navigate"><i class="bi bi-skip-start-fill"></i></button>
<button id="play" class="button button-biggest"><i class="bi bi-play-circle-fill"></i></button>
<button id="next" class="button button-navigate"><i class="bi bi-skip-end-fill"></i></button>
<button id="repeat" class="button"><i class="bi bi-repeat"></i></button>
</div>Coloque a indicação dentro do querySelector para que o JavaScript possa recuperar a informação do HTML e manipulá-la.
JavaScript
function playSong() {
play.querySelector(".bi").classList
song.play();
}
play.addEventListener("click", playSong);Pronto recuperamos o ícone de play
Colocamos o ponto “.” antes do bi para acessar as propriedades e ter a capacidade de executar ação do elemento recuperado.
Em seguida adicionamos o classlist que dá acesso a todas as classes que esse elemento (botão play) possui.
A ideia aqui é criar um comando no JavaScript que faça a troca dos botões, basicamente quando apertarmos o play este comando vai fazer o botão play sumir e aparecer o botão pause, e vice e versa, sempre obedecendo ao clique.
Como vamos fazer isso?
Primeiro vamos usar a estrutura que acabamos de criar para remover o botão de play.
function playSong() {
play.querySelector(".bi").classList.remove("bi-play-circle-fill");
song.play();
}
play.addEventListener("click", playSong);Em seguida copiamos a mesma estrutura usando o atalho Alt + shift + seta para baixo = copia toda a linha para baixo.
Nesta nova linha vamos adicionar o botão de pause.
function playSong() {
play.querySelector(".bi").classList.remove("bi-play-circle-fill");
play.querySelector(".bi").classList.add("bi-pause-circle-fill");
}
play.addEventListener("click", playSong);Observe que temos que ter o código do ícone do botão pause nesta segunda linha, como pegamos do mesmo site a única diferença foi trocar o play pelo pause.
Assim da mesma forma que temos uma função para trocar o botão e executar o play vamos fazer mais uma para o pause com a mesma estrutura:
Veja:
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
const play = document.getElementById("play");
songName.innerText = 'As You Were';
function playSong() {
play.querySelector(".bi").classList.remove("bi-play-circle-fill");
play.querySelector(".bi").classList.add("bi-pause-circle-fill");
song.pause();
}
play.addEventListener("click", playSong);Feito isso é importante dizer que nós queremos que o botão reaja a partir de uma condição, um estímulo.
A música está ou não está tocando?
Nosso botão deve reagir da forma adequada a este estímulo certo?
Para resolver isso devemos fazer uma nova variável auxiliar -> vamos usar o LET, ele muda o valor da variável lembra?
Nesta linha do LET estamos vendo se a música está tocando, vamos começar com um resultado falso, porque quando entramos no nosso display ele não deve começar a tocar de imediato, deve esperar pelo clique.
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
const play = document.getElementById("play");
songName.innerText = 'As You Were';
let isPlaying = false;
function playSong() {
play.querySelector(".bi").classList.remove("bi-play-circle-fill");
play.querySelector(".bi").classList.add("bi-pause-circle-fill");
song.pause();
}
play.addEventListener("click", playSong);Agora vamos acrescentar o isPlaying dentro dos comandos que fizemos anteriormente para os botões play e pause, neste caso no final de playSong ele será = a verdadeiro (true) porque a música deve estar tocando e no final de pauseSong = falso (false).
const songName = document.getElementById("song-name");
const song = document.getElementById("audio");
const play = document.getElementById("play");
songName.innerText = 'As You Were';
let isPlaying = false;
function playSong() {
play.querySelector(".bi").classList.remove("bi-play-circle-fill");
play.querySelector(".bi").classList.add("bi-pause-circle-fill");
song.play();
isPlaying = true;
}
function pauseSong() {
play.querySelector(".bi").classList.add("bi-play-circle-fill");
play.querySelector(".bi").classList.remove("bi-pause-circle-fill");
song.pause();
isPlaying = false;
}
play.addEventListener("click", playSong);Precisamos agora criar a função para decidir o comportamento, se a nossa música está tocando ou pausada, vamos chamá-la de playPauseDecider().
Estrutura condicional
Dentro desta nova função vamos usar uma estrutura condicional, este tipo de estrutura é fundamental em JavaScript e você vai ter contato com ela durante sua vida toda como programador.
Se a minha variável isPlaying que sinaliza se a música está sendo tocada ou não for igual a verdadeiro (a música está tocando) então devemos pausar, por isso temos na sequência o pauseSong.
Se não (else) se a música, na verdade, não estiver tocando então vamos executar playSong.
Isto que nossa função está fazendo, observe que esta função é a mais completa, com todas as estruturas inclusas nela.
Por este motivo vamos substituir na linha de play.addEventListener, vamos colocar a função que acabamos de criar para ser executada após o clique, (retire playSong e coloque playPauseDecider).
Resolução:
function playSong() {
isPlaying = true;
play.querySelector("i.bi").classList.remove("bi-play-circle-fill");
play.querySelector("i.bi").classList.add("bi-pause-circle-fill");
song.play();
isPlaying = true;
}
function pauseSong() {
isPlaying = false;
play.querySelector("i.bi").classList.add("bi-play-circle-fill");
play.querySelector("i.bi").classList.remove("bi-pause-circle-fill");
song.pause();
isPlaying = false;
}
function playPauseDecider() {
if (isPlaying === true) {
pauseSong();
} else {
playSong();
}
}Vamos aproveitar que já vimos as estruturas e trazer para o JavaScript os comandos referentes aos demais botões (música e imagem), afinal esses elementos estão sendo definidos pelo src no HTML e como o HTML é uma estrutura estática, lá não vamos conseguir o dinamismo que queremos.
O primeiro passo é retirar o src das tags img e áudio, deixe como na imagem abaixo:
<div class = "music-container">
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover'></img>
<audio id='audio'></audio>
<div id = "below-cover">
<div id="song-info">
<div id ="song-name">Nome da música</div>Observe que após retirar o src e salvar, a imagem e o áudio desaparecem do display, isso acontece porque falta um atributo importante, o Alt.
Alt
O alt serve como um descritor da imagem, nele as características do que é mostrado podem ser descritas, é um recurso importante para que o display possa ser usado por pessoas com deficiência, por exemplo. Vamos acrescentar o alt na tag img:
<div class = "music-container">
<h4 id="playlist-title">Playlist Hashtag</h4>
<img id='cover'alt="Disc Cover."></img>
<audio id='audio'></audio>
<div id = "below-cover">
<div id="song-info">
<div id ="song-name">Nome da música</div>Após acrescentar o alt e salvar, vai aparecer um ícone no lugar da imagem do nosso display, veja:
Src:
Vamos acrescentar o src no JavaScript, nossa intenção é atualizar o nome da banda, nome da música, a capa do disco e a música em si.
O único problema é que no JavaScript só temos referências (const) para o nome da música e para a música.
Vamos criar essas referências, lembrando que não podemos repetir os nomes!
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play");Agora que temos a referência, temos que ter todas as informações sobre a música, como se fosse uma carteira de identidade, isso mesmo, vamos criar uma identidade para cada música!
Vamos excluir a linha songName.innerText = “As You Were”; e no seu lugar vamos criar a identidade para cada música do nosso display.
const cover = document.getElementById("cover");
const play = document.getElementById("play");
const next = document.getElementById("next");
const previous = document.getElementById("previous");
//seção de variáveis auxiliares para o meu código
const asYouWere = {
songName: "As You Were",
file: "as_you_were",
artist: "TrackTribe",
};
const cantHide = {
songName: "Can't Hide",
file: "cant_hide",
artist: "Otis McDonald",
};
const boomBapFlick = {
songName: "Boom Bap Flick",
file: "boom_bap_flick",
artist: "Quincas Moreira",
};Array
Lembra que explicamos nas primeiras aulas que a variável é como se fosse uma caixinha que guarda as informações? O conceito de array é semelhante, porém é uma caixa maior, será uma coletânea com todas as nossas músicas.
A vantagem de utilizar o array é que além de organizar as músicas em uma mesma variável, podemos trabalhar com cada uma delas de forma separada, é como se cada música estivesse em uma caixa dentro do array.
O importante aqui é entender que a primeira música não será a número 1, essa estrutura começa a contar a partir do zero como mostra a imagem acima.
Estrutura – Array []
const asYouWere = {
songName: "As You Were",
file: "as_you_were",
artist: "TrackTribe",
};
const cantHide = {
songName: "Can't Hide",
file: "cant_hide",
artist: "Otis McDonald",
};
const boomBapFlick = {
songName: "Boom Bap Flick",
file: "boom_bap_flick",
artist: "Quincas Moreira",
};
let isPlaying = false;
const playlist = [asYouWere, cantHide, boomBapFlick];
let index = 0;Feito isso, precisamos de uma função que inicialize as músicas e imagens dentro do nosso display.
Vamos criar esta função para funcionar de forma automática, para isso vamos usar a crase, dentro dela vamos indicar a pasta, neste caso “Images”, vamos definir o nome da música como uma variável -> a playlist e vamos pegar o índice para acessar esta variável -> index.
Vamos identificar também qual a característica que queremos acessar, criamos as identidades das músicas, as variáveis, cada uma com 3 características, vamos acessar o file, e por fim o tipo de arquivo.
function initializeSong() {
cover.src = `/images/${playlist[currentSong].file}.webp`;
songName
bandName
song
}
Esta linha de código está gerando as informações automática para nós.
Vamos fazer o mesmo para os demais:
function initializeSong() {
cover.src = `/images/${playlist[currentSong].file}.webp`;
songName.innerText = playlist[currentSong].songName;
bandName.innerText = playlist[currentSong].artist;
song.src = `/songs/${playlist[currentSong].file}.mp3`;
}
initializeSong();Após criar a estrutura da função, podemos chamar a função logo abaixo e salvar, como na imagem acima, observe que na playlist os elementos vão tornar a aparecer!
Agora que você já viu as estruturas, vamos fazer o mesmo para os botões de avançar e voltar!
Primeiro vamos criar as referências:
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play");
const next = document.getElementById("next");
const previous = document.getElementById("previous");
Em seguida Definimos que estes botões vão ter uma ação (função) a partir de um estímulo, o clique.
Função previousSong()
Para esta função vamos fazer uma comparação usando a estrutura do IF, nossa lista de músicas tem 3 músicas e o nosso botão deve passar para a música anterior quando estimulado pelo clique.
Mas e se a música já estiver no índice 0?
Para resolver este problema vamos ter que primeiro definir um ciclo para as músicas, ou seja, quando chegar na música 0 o botão deve nos levar de volta a música 2:
function previousSong() {
if(index === 0){
index = playlist.length - 1;Então o que esta função está fazendo é:
Se o valor do índice for igual a 0 então o índice deve receber o tamanho (length) da playlist menos um (-1).
Agora se o índice não for 0, (caso contrário -> else) então o índice será o próprio valor do índice menos um (-1).
Por fim vamos colocar a função para iniciar o som (initializeSong) e o play (playSong).
function previousSong() {
if(index === 0){
index = playlist.length - 1;
}
else {
index -=1;
}
initializeSong();
playSong();Vamos construir a mesma estrutura para o botão de avançar com algumas sutis mudanças, primeiro mudamos o nome, e depois se o índice já estiver no último elemento, ele deve voltar para o 0.
Esta é a estrutura oposta à anterior, observe que só trocamos a ordem, e caso o índice não esteja ainda no limite, temos que incrementar +1 para que ele avance para a próxima música:
Resultado:
function previousSong() {
if(index === 0){
index = playlist.length - 1;
}
else {
index -=1;
}
initializeSong();
playSong();
function nextSong() {
if(index === playlist.length - 1;){
index = 0;
}
else {
index +=1;
}
initializeSong();
playSong();Por fim vamos colocar o nome das novas estruturas para serem iniciadas a partir do clique, como nas últimas linhas da imagem acima.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Hoje vamos para a sétima aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web JavaScript!
Nessa aula eu vou te mostrar como podemos fazer a barra de progresso automática no JavaScript, ou seja, vamos fazer com que ela seja atualizada a medida com que a música toque.
Lembrando que para isso vamos utilizar os eventos da tag de áudio no JavaScript, vamos criar uma função para barra de progresso no player.
Feito isso, vamos atualizar a largura da barra de progresso no JavaScript para que ela seja alterada a medida em que a música é tocada.
Ainda vamos aprender como avançar na barra de progresso, ou seja, vamos poder avançar apenas clicando na barra de progresso!
Barra de progresso – Projeto Web de JavaScript
Na última aula nós vimos como programar um evento após um estímulo, para fazer a barra de progresso vamos fazer algo muito semelhante, o estímulo será diferente, mas a ideia é a mesma.
Neste momento temos uma barra de progresso estática que não representa o progresso da música. Vamos mudar isso?
Tag de áudio
Estamos usando a tag de áudio para lidar com toda a parte de manipular a música, agora vamos fazer com que o programa escute alguns eventos que esta tag de áudio emite.
Vamos acrescentar o addEventListener (adicionar um evento) para song, que criamos na aula passada, o evento vai se chamar Timeupdate.
play.addEventListener("click", playPauseDecider);
next.addEventListener("click", nextSong);
previous.addEventListener("click", previousSong);
song.addEventListener('timeupdate')Timeupdate
A função do Timeupdate é avisar sobre o progresso da música, ele emite eventos a cada avanço da música repetidamente.
Nosso objetivo agora é fazer com que a barra de progresso aumente um pouco a cada vez que o evento ocorrer.
Observe que a nossa barra de progresso está travada pela metade. Você lembra por que está assim?
Quando criamos no CSS um conjunto de estilos para a barra, nesse estilo definimos o Width com o valor de 50% fixo.
#current-progress {
background-color: white;
height: inherit;
width: 50%;
border-radius: inherit;
}Para modificar o width e conseguir manipulá-lo no JavaScript, teremos que criar no CSS uma variável.
#current-progress {
--progress: 0%;
background-color: white;
height: inherit;
width: 50%;
border-radius: inherit;
}É necessário colocar os dois tracinhos antes de do nome da variável –progress, para sinalizar que se trata de uma variável, esta variável que deverá ditar o tamanho da nossa barra.
#current-progress {
--progress: 0%;
background-color: white;
height: inherit;
width: var(--progress);
border-radius: inherit;
}Só precisamos trocar o valor pré-definido de 50% pela variável que criamos -> Salve e observe que no nosso display a barra já atualiza para 0% de progresso.
Função
Primeiro vamos criar em JavaScript a referência para a nossa barra:
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play")
const next = document.getElementById("next")
const previous = document.getElementById("previous")
const currentProgress = document.getElementById("current-progress")Algumas das propriedades da tag áudio vão ser fundamentais agora:
Concorda comigo que:
Dividindo o tempo já tocado -> DurrentTime, com o tempo total -> Duration e multiplicando o resultado por 100, vamos ter a porcentagem a ser preenchida pela nossa barra?
(DurrentTime / Duration) * 100
Vamos utilizar este cálculo na função
function updateProgressBar(){
song.currenTime
song.duration
const barWidth = (song.currentTime/song.duration)*100;
currentProgress
}Feito o cálculo temos que atualizar o CSS, a parte onde temos as características da nossa barra de rolagem, vamos com o Style -> indicar o nome da variável que criamos no CSS para comandar essa ação –progress e colocar o resultado da nossa função barWidth formatada para aparecer como porcentagem.
Função
function updateProgressBar(){
const barWidth = (song.currentTime/song.duration)*100;
currentProgress.style.setProperty('--progress','${barWidth}%');
}Detalhe Importante
Nos displays, a barra de progresso não serve apenas para indicar o tempo da música, serve também para conseguir adiantar a música ou retornar dependendo de onde clicamos na barra.
Vamos fazer isso acontecer?
Primeiro vamos esclarecer como o navegador enxerga esses elementos que estamos trabalhando, dentro do seu navegador clique no F12 do seu teclado.
Observe o ícone apontado pela seta na imagem acima, vamos usar esta funcionalidade.
Clicando neste ícone e passando o mouse sobre a imagem vamos perceber algumas partes coloridas, cores amarela, verde, abóbora e azul.
O que essas cores significam?
Para entender melhor isso, fiz esta imagem para exemplificar, temos 4 retângulos, 3 deles (azul, verde e amarelo) estão dentro da linha preta, e apenas 1 (abóbora) sendo a margem, está fora do contorno preto.
A linha preta está delimitando a área que podemos clicar no ícone, é a área onde o clique vai funcionar, fora dela, na margem não vai surtir efeito nenhum.
Por que isso é importante?
Observe nesta imagem a área da nossa barra de progresso, toda a parte abóbora está fora dos limites onde podemos clicar, onde podemos é uma pequena área, muito fina.
Para utilizar a barra de progresso para adiantar ou voltar a música temos que conseguir clicar na barra com o máximo de facilidade. Nosso objetivo agora é aumentar o espaço em que podemos clicar:
Conforme a nossa imagem, este espaço pode ser expandido se incluirmos no conteúdo o espaço do preenchimento e a borda, tudo que esta dentro da linha preta é uma opção de expansão onde será possível clicar.
HTML
Para fazermos isso vamos criar no HTML uma div que compreenda exatamente as linhas de código da barra de progresso que queremos alterar -> crie um id = “progress-container”.
<div id="like" class ="button light-color"><i class="bi bi-heart"></i></div>
</div>
<div id="progress-container">
<div id="progress-bar">
<div id="current-progress"></div>
</div>
</div>
<div id = "button-container">CSS
Feito isso vamos definir um estilo no CSS:
#current-progress {
--progress: 0%;
background-color: white;
height: inherit;
width: var(--progress);
border-radius: inherit;
}
#progress-container {
padding-bottom: 1em;
}Crie o estilo e salve -> observe que imediatamente após salvar, no display o espaço entre a barra de progresso e o botão de play vai aumentar!
Conseguimos aumentar as áreas de estímulo para o clique e obter o mesmo espaçamento que tínhamos com a margem, porém em uma área mais útil para o nosso display.
Ainda temos a margem, mas agora ela não é mais necessária, seria interessante excluir.
Para fazer isso é simples, apenas exclua a linha margin-bottom: 1em; de #progress-bar no CSS.
JavaScript
Vamos voltar ao JavaScript criar a variável para referência -> progress-container
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play")
const next = document.getElementById("next")
const previous = document.getElementById("previous")
const currentProgress = document.getElementById("current-progress")
const Progresscontainer = document.getElementById("progress-container")Agora vamos adicionar o evento que vai estimular a ação na nossa barra de progresso.
Neste caso o estímulo é o clique e para a ação teremos que criar uma função que vamos chamar de jumpTo (pular para)
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("click", updateProgressBar);
progresContainer.addEventListener("click", jumpto);Função
Para fazer essa função vamos rebuscar um pouco mais as informações sobre os estímulos, o estímulo do clique, por exemplo, não vem sozinho do addEventListener.
Além de sabermos que houve um clique também temos a propriedade de saber onde o clique aconteceu, em que parte da nossa tela, isso será importante para a nossa função.
function jumpTo(event){
const width = Progresscontainer.clientWidth;
const clickPosition = event.offsetX;
const jumpToTime = (clixkPosition/width)* song.duration;
song.currentTime = jumpToTime;
}
Na função vamos criar uma variável que representa a largura da nossa barra de progresso const width.
A segunda variável da função tem a propriedade de informar quanto em pixels nossa barra deve avançar após ser estimulada pelo clique -> ClickPosition.
A terceira linha da função é a variável responsável por pegar as informações que já temos e fazer o cálculo de porcentagem do progresso da nossa música.
Desta vez com mais uma atribuição, indicar para onde devemos avançar na barra. Vamos calcular o tempo de música já tocada -> ClickPosition e multiplicar pelo tempo total da música -> song.duration, isso nos dá a porcentagem, ou seja, nos dá a posição para onde a música vai na barra de progresso.
Feito isso vamos atribuir este novo valor para variável song.currentTime -> salve as alterações no código. Perceba que seu Projeto Web de JavaScript já possui uma barra de progresso habilitada e funcional, avançando com o estímulo de um clique!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Na aula de hoje nós vamos abordar o botão de shuffle (botão de embaralhar) para podermos usar a opção de músicas aleatórias no player!
Então para criar essa ordenação aleatória e estar embaralhando as músicas do player eu vou fazer uma explicação um pouco mais detalhada de como isso funciona.
Assim você vai entender como fazer a geração de números aleatórios no JavaScript.
Além disso, vou te mostrar como deixar o botão de ordem aleatória selecionado no JavaScript, assim vamos conseguir ativar e desativar o botão, dessa forma vamos saber quando o botão está ativado ou não.
Esta é a penúltima aula do nosso curso, nela vamos dar mais atenção ao botão de embaralhar, além desse nas próximas aulas temos os botões de repetir e dar like, como mostra a imagem abaixo.
Antes de continuar, vamos fazer uma alteração importante, vamos adicionar ao nosso código uma propriedade que muda o cursor do mouse de seta para uma mãozinha, indicando para o usuário que aquele elemento é clicável, bacana né!? Vamos fazer isso?
CSS
#button-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.button {
font-size: 1.5em;
cursor: pointer;
}
.button-navigate {
font-size: 3em;
}Em .button adicione cursor: pointer;
Vamos fazer o mesmo na barra de progresso:
CSS
#current-progress {
--progress: 0%;
background-color: white;
height: inherit;
width: var(--progress);
border-radius: inherit;
}
#progress-container {
padding-bottom: 1em;
cursor: pointer;
}
Feito isso vamos tratar o botão id = shuffle no JavaScript, isso vai começar de uma forma bem conhecida, vamos criar um const para este botão.
JavaScript
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play")
const next = document.getElementById("next")
const previous = document.getElementById("previous")
const currentProgress = document.getElementById("current-progress")
const Progresscontainer = document.getElementById("progress-container")
const shuffleButton = document.getElementById("Shuffle")E como de costume vamos acrescentar um evento:
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("click", updateProgressBar);
progressContainer.addEventListener("click", jumpTo);
shuffleButton.addEventListener("click", playPauseDecidersheffleButtonClicked);Agora vamos colocar uma variável auxiliar para nos informar se a playlist está ou não embaralhada:
Let isShuffled = false;
JavaScript
const asYouWere = {
songName: "As You Were",
file: "as_you_were",
artist: "TrackTribe",
};
const cantHide = {
songName: "Can't Hide",
file: "cant_hide",
artist: "Otis McDonald",
};
const boomBapFlick = {
songName: "Boom Bap Flick",
file: "boom_bap_flick",
artist: "Quincas Moreira",
};
let isPlaying = false;
let isShuffled = false;
const playlist = [asYouWere, cantHide, boomBapFlick];
let index = 0;Se o resultado for falso, significa que o nosso botão está desativado, vamos salvar esta informação e usá-la na hora de criar a função que vai corresponder a ação deste botão.
Ponto importante! Nosso botão deve funcionar embaralhando a playlist e desembaralhando quando clicamos novamente, isso significa que não podemos simplesmente embaralhar sem que depois possamos retornar a lista original.
Ou seja, eu não posso embaralhar minha lista original, eu tenho que criar uma outra onde eu possa embaralhar a vontade.
Então, alteramos o nome da lista original que era playlist (é como vamos buscar no código) para originalPlaylist (trocamos para ser mais intuitivo) e logo abaixo criamos a cópia let sortedPlaylist:
const boomBapFlick = {
songName: "Boom Bap Flick",
file: "boom_bap_flick",
artist: "Quincas Moreira",
};
let isPlaying = false;
let isShuffled = false;
const originalplaylist = [asYouWere, cantHide, boomBapFlick];
let sortedPlaylist = [...originalplaylist];
let index = 0;Agora precisamos trocar a playlist original pela nova em todo o nosso código!
Como fazer essa troca da forma mais eficiente?
Control + F
O comando control + f serve para abrir a barra de pesquisa, escreva na barra playlist e observe que todas as vezes que a palavra aparece no código, ela será destacada.
Agora só precisamos substituir a palavra playlist por sortedPlaylist que é a nossa cópia, observe também que, ao lado da barra de busca aparece a quantidade de vezes em que a palavra foi encontrada, portanto, se está aparecendo 1 of 6, você deve encontrar e substituir os 6 nomes.
Como reordenar a playlist?
Imagine que temos 5 bolinhas de gude que estão dispersas em uma caixa.
Seria como se pegássemos bolinha por bolinha aleatórias nesta caixa, e claro, a ordem pode ser uma infinidade de possibilidades.
Isso é importante porque precisamos ensinar o programa a embaralhar as músicas.
Como fazemos isso?
Vamos usar um processo de ordenação aleatória usado para computador.
Agora, vamos criar a função que vai indicar se estamos embaralhando as músicas ou não, se o resultado for false, ou seja, se as músicas não estiverem embaralhadas, a função recebe true e executa o shuffleArray.
function shuffleButtonClicked(){
if(isShuffled === false){
isShuffled = true;
shuffleArray();
}
}Function shuffleArray (preShuffleArray):
function shuffleArray(preShuffleArray){
const size = sortedPlaylist.length;
let currentIndex = size -1;
while(currentIndex > 0){
Math.random();
}
}
function shuffleButtonClicked(){
if(isShuffled === false){
isShuffled = true;
shuffleArray();
}
}Observe que estamos indicando para o código que o tamanho da nossa playlist const size é um tamanho fixo.
Logo abaixo em let currentIndex recebe o tamanho size menos um (size – 1).
Feito isso vamos criar um laço de repetição While que vai repetir o processo até que todas as músicas já tenham sido selecionadas.
No While vamos colocar que enquanto currentIndex (sendo os valores que estão sendo embaralhados) for maior que 0, ou seja, a função no 0 já terá embaralhado a primeira música, maior que zero será a próxima a ser embaralhada.
Enquanto isso estiver acontecendo, dentro do While vamos estabelecer uma estrutura aleatória usando um recurso chamado Math.random() esse é o recurso matemático de JavaScript (Math) que tem a funcionalidade (Random) de retornar um número aleatório entre 0 e 1.
Perceba que entre 0 e 1 temos uma infinidade de números, 0,1, 0,5, 0,8, 0,9 etc…
Lembra que estávamos sorteando as músicas pelos itens do array, o exemplo de caixinhas que fizemos?
Se temos 5 elementos a serem sorteados e minha função funciona entre 0 e 1, faz sentido gerar um número aleatório em um processo que não supere o valor de músicas que temos disponíveis.
Vamos incluir a função que vai gerar esses valores aleatórios:
function shuffleArray(preShuffleArray){
const size = sortedPlaylist.length;
let currentIndex = size -1;
while(currentIndex > 0){
Math.randomIndex = Math.floor(Math.random()* size);
}
}Feito isso, vamos entender que toda vez que um número da nossa lista é sorteado ele troca de lugar com outro valor que esteja disponível para ser sorteado.
Como fazemos isso?
Vamos criar uma variável auxiliar que vai guardar preShuffleArray com o valor original [currentIndex] para que este valor não se perca, depois continuamos obtendo o valores até o último.
É importante decrescer 1 a cada vez que rodamos o código para saber quando parar de rodar.
Resultado para a função de embaralhar:
function shuffleArray(preShuffleArray){
const size = preShuffleArray.length;
let currentIndex = size -1;
while(currentIndex > 0){
Math.randomIndex = Math.floor(Math.random()* size);
let aux = preShuffleArray[currentIndex];
preShuffleArray[currentIndex] = preShuffleArray[randomIndex]
preShuffleArray[randomIndex] = aux;
currentIndex -= 1;
}
}Agora nossa playlist sortedPlaylist será embaralhada por esta função shuffleArray, só precisamos colocar a playlist dentro dos parênteses da nossa Function shuffleButtonClicked():
function shuffleArray(preShuffleArray){
const size = preShuffleArray.length;
let currentIndex = size -1;
while(currentIndex > 0){
Math.randomIndex = Math.floor(Math.random()* size);
let aux = preShuffleArray[currentIndex];
preShuffleArray[currentIndex] = preShuffleArray[randomIndex]
preShuffleArray[randomIndex] = aux;
currentIndex -= 1;
}
}
function shuffleButtonClicked(){
if(isShuffled === false){
isShuffled = true;
shuffleArray(sortedPlaylist);
}
}Um detalhe importante!
Quando clicamos no botão de embaralhar do nosso display, observe que ele deve ficar verde, indicando estar acionado.
CSS
Vamos criar uma classe para isso no CSS que define a mudança de cor:
#progress-container {
padding-bottom: 1em;
cursor: pointer;
}
.button-active {
color:rgb(0, 128, 62)
}Feito isso, voltamos para o JavaScript e acrescentamos na nossa função essa propriedade do botão, ou seja, quando estiver desligado o botão vai ligar e mudar a cor para verde.
function shuffleButtonClicked(){
if(isShuffled === false){
isShuffled = true;
shuffleArray(sortedPlaylist);
shuffleButton.classList.add('button-active');
}
}Agora a função está programada para fazer o botão funcionar caso esteja desativado.
Mas, e se a situação for o oposto?
Se o botão estiver ligado e a intenção for desligá-lo?
Neste caso vamos usar o else e, logo após, a estrutura inversa da usada para ligar, observe:
Agora desligando o botão vamos retornar a estrutura original e remover o verde.
function shuffleButtonClicked(){
if(isShuffled === false){
isShuffled = true;
shuffleArray(sortedPlaylist);
shuffleButton.classList.add('button-active');
}
else {
isShuffled = false;
sortedPlaylist = [...originalplaylist];
shuffleButton.classList.remove('button-active');
}
}
Ficamos por aqui na penúltima aula do nosso Projeto Web de JavaScript! Até a próxima!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Hoje vamos para a nona aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web JavaScript!
Nessa aula vamos colocar a funcionalidade no botão repeat (botão de repetir a música) e ainda vamos fazer um ajuste no tempo de música.
Dessa forma vamos poder colocar a música em um loop para repetir e ainda vamos ajustar a duração da música.
Assim poderemos visualizar qual o tempo atual da música e qual a duração da música.
Para isso nós vamos utilizar o timer no JavaScript para atualizar o tempo da música e o math.floor no JavaScript para fazer o cálculo do tempo em JavaScript.
Isso é necessário para fazer a conversão para hora minuto e segundo, pois os dados de tempo que recebemos é apenas em segundos, então temos que fazer essa transformação.
E aí, vamos para reta final do nosso projeto?
Nesta aula nós iremos basicamente fazer mudanças que são extensões de tudo que já aprendemos até agora.
Nosso botão de embaralhar playlist, por exemplo, na aula passada nós adicionamos a funcionalidade dele e também colocamos a cor verde para indicar quando ele estava ativo ou não.
Nesta aula vamos começar a fazer o mesmo para o botão de repetir a música, vamos seguir o mesmo passo a passo com algumas sutis mudanças que vou explicar mais a fundo…
Passo a passo:
JavaScript – Vamos criar a nossa referência (const):
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play")
const next = document.getElementById("next")
const previous = document.getElementById("previous")
const currentProgress = document.getElementById("current-progress")
const Progresscontainer = document.getElementById("progress-container")
const shuffleButton = document.getElementById("Shuffle")
const repeatButton = document.getElementById('repeat');E criar o evento:
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("click", updateProgressBar);
progressContainer.addEventListener("click", jumpTo);
shuffleButton.addEventListener("click", shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);Agora podemos fazer a função que será muito parecida com a que foi feita na aula passada, observe:
Primeiro vamos criar mais uma variável auxiliar, que por padrão vai começar como falso, para a nossa música não entrar já tocando – > repeatOn
let isPlaying = false;
let isShuffled = false;
let repeatOn = false;
const originalplaylist = [asYouWere, cantHide, boomBapFlick];
let sortedPlaylist = [...originalplaylist];
let index = 0;
Nossa função vai receber esta informação e habilitar como verdadeiro para que se inicie o som:
function repeatButtonClicked() {
if (repeatOn === false) {
repeatOn = true;
repeatButton.classList.add('button-active');
}
}Colocamos também a classe com a cor do botão para ficar verde quando acionado.
Ainda não temos a ação de tocar e parar a música, para isso vamos completar com o else a função fazendo a ação contrária:
function repeatButtonClicked() {
if (repeatOn === false) {
repeatOn = true;
repeatButton.classList.add('button-active');
} else {
repeatOn = false;
repeatButton.classList.remove('button-active');
}
}Lembra que comentei que este botão possuía uma sutil diferença? Então vamos falar sobre ela:
Em uma playlist quando você termina uma música outra música começa logo em seguida.
Quando estamos com o botão de repetir selecionado a música irá se repetir e quando terminar não vai passar para uma próxima a não ser que programemos para isso.
Vamos usar a tag de áudio SONG para otimizar a ação deste botão, depois do evento, que será o término da música teremos a opção de ir para a próxima ou repetir “nextOrRepeat”
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("click", nextOrRepeat);
progressContainer.addEventListener("click", jumpTo);
shuffleButton.addEventListener("click", shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);Agora vamos criar a função nextOrRepeat:
function nextOrRepeat() {
if (repeatOn === false) {
nextSong();
} else {
playSong();
}
}
Esta função irá passar para a próxima música se o botão de repetir não estiver habilitado, se estiver a música se repete.
Feito isso, resolvemos mais um botão, vamos agora dar atenção a nossa barra de evolução da música:
Esta barra não mostra quanto tempo de música já foi tocado nem o tempo total da música.
Vamos acrescentar essas informações?
HTML
Vamos acrescentar mais uma div no HTML para fazer esta ação:
Concatenado a nossa div de progress-container vamos colocar uma nova div, ou seja, visualmente, logo abaixo do retângulo da nossa barra de evolução da música vamos colocar mais um retângulo e ele vai ter o tempo da música em suas extremidades.
Vamos abrir uma div para este retângulo e dentro dela mais duas para o tempo da música tocada e o tempo total.
Vamos também acrescentar o ID em cada uma para conseguir manipular o estilo.
<div id="progress-container">
<div id="progress-bar">
<div id="current-progress"></div>
</div>
<div id="time-box">
<div id="song-time">00:00:00</div>
<div id="total-time">00:00:00</div>
</div>
</div>Começaremos com o tempo inicial de 00 horas. Observe que o time não ficou alinhado um em cada ponta da barra, teremos que programar um estilo para corrigir e deixar mais bonito…
CSS – Vamos ajustar para dividir o espaço em cada ponta da linha.
.button-active {
color:rgb(0, 128, 62)
}
#time-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}Resultado
Ainda podemos diminuir o tamanho dos nossos horários e afastá-los um pouco da barra de progresso:
#time-box {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: smaller;
margin-top: 0.5em;
}Feito isso, está quase tudo pronto, vamos apenas fazer um ajuste simples, porque não precisamos mais do espaço adicional abaixo da nossa barra de progresso, para não ter este espaço desnecessário vamos retirá-lo
CSS – Temos apenas que retirar no CSS este comando de padding-bottom: 1em;
#progress-container {
padding-bottom: 1em;
cursor: pointer;
}
Conseguimos agora um espaço satisfatório entre nossos elementos!
Precisamos agora programar o tempo da música, para visualizá-lo no lugar do zero, o tempo total em uma ponta e a evolução do tempo na outra, este é o nosso objetivo.
JavaScript – Crie a referência totalTime
const songName = document.getElementById("song-name");
const bandName = document.getElementById("band-name");
const song = document.getElementById("audio");
const cover = document.getElementById("cover");
const play = document.getElementById("play")
const next = document.getElementById("next")
const previous = document.getElementById("previous")
const currentProgress = document.getElementById("current-progress")
const Progresscontainer = document.getElementById("progress-container")
const shuffleButton = document.getElementById("Shuffle")
const repeatButton = document.getElementById('repeat');
const songTime = document.getElementById('song-time');
const totalTime = document.getElementById('total-time');Vamos criar duas funções, uma para atualizar o tempo real que se passou da música e outra para marcar o tempo total de duração da música.
function updateCurrentTime() {
songTime.innerText = song.currentTime;
}
function updateTotalTime() {
songTime.innerText = song.duration;
}Feito isso vamos utilizar o alert (apenas para exemplo) para mostrar o tempo percorrido da música.
O nosso problema, é que por norma o tempo é mostrado em segundos, mas nós vamos tratar desta condição, e para isso vamos começar colocando um evento novo que vamos chamar de loadedmetadata, ele irá carregar as informações da música:
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("timeupdate", updateProgressBar);
song.addEventListener("ended", nextOrRepeat);
song.addEventListener("loadedmetadata");
progressContainer.addEventListener("click", jumpTo);
shuffleButton.addEventListener("click", shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);Carregando as informações da música o código consegue saber o tempo total dela, este é um exemplo de metadados.
Quando o evento está pronto vai ocorrer a emissão desses metadados, feito isso a próxima ação será a nossa função updateTotalTime que vamos colocar logo após ao evento loadedmetadata como mostra a imagem abaixo:
play.addEventListener("click", playPauseDecider);
previous.addEventListener("click", previousSong);
next.addEventListener("click", nextSong);
song.addEventListener("timeupdate", updateProgressBar);
song.addEventListener("ended", nextOrRepeat);
song.addEventListener("loadedmetadata", updateTotalTime);
progressContainer.addEventListener("click", jumpTo);
shuffleButton.addEventListener("click", shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);Salvando esses eventos e alterações, já conseguiremos visualizar o tempo da música, mas ainda com várias casas decimais…
Vamos tratar essa forma de visualizar os dados fazendo outra função em JavaScript.
function toHHMMSS(originalNumber){
let hours = Math.floor(originalNumber/3600);Chamamos nosso tempo original do display de originalNumber e vamos transformá-lo em horas ignorando os minutos e segundos com o Math.floor.
function toHHMMSS(originalNumber){
let hours = Math.floor(originalNumber/3600);
let min = Math.floor(originalNumber - hours * 3600)/60);
let secs = Math.floor(originalNumber - hours * 3600) - min*60);Nas próximas linhas vamos descontar o valor em segundos transformado em horas e calcular do restante quanto temos em minutos, sempre retirando os valores quebrados usando o Math.floor e na última linha faremos o mesmo para os segundos…
Fazendo um exemplo do nosso resultado agora, vamos ver que está mais próximo do que buscamos
Observe que a informação de horas está com apenas um dígito, por ser uma informação do tipo numérica, se tratássemos o tipo dessa informação como texto que para o JavaScript é denominado string nós conseguiríamos melhorar a formatação…
Vamos fazer isso então?
Vamos usar o toString para modificar o tipo, são horas, mas vamos tratar como texto, e vamos passar para o código a quantidade de algarismos que queremos que o texto tenha, se o número não chegar a 2 algarismos vamos completar com 0 a informação do texto.
Faremos esta formatação não só para as horas, mas também para os minutos e segundos.
Observe que passando essas informações textuais o resultado fica muito melhor, mais profissional.
Então vamos corrigir nossa função colocando o return, porque diferente das funções que fizemos anteriormente onde era executada uma ação, mas essa ação após executada não nos retornava nenhum valor, neste caso é diferente, queremos após a execução um tratamento de texto visível em nosso resultado.
function toHHMMSS(originalNumber){
let hours = Math.floor(originalNumber/3600);
let min = Math.floor(originalNumber - hours * 3600/60);
let secs = Math.floor(originalNumber - hours * 3600 - min*60);
return `${hours.toString().padStart(2, '0')}:${min.toString()
.padStart(2, '0')}:${secs.toString().padStart(2, "0")}`;
}
function updateCurrentTime() {
songTime.innerText = song.currentTime;
}
function updateTotalTime() {
songTime.innerText = song.duration;
}
Nossa função está calculando o tempo em horas, minutos e segundos e retornando um tratamento de texto para o resultado dos cálculos.
Feito isso vamos fazer um ajuste no nosso código para aproveitar uma função já existente que está calculando o tempo decorrido da nossa música, assim adiantamos nosso trabalho.
Vamos modificar o nome da função para tornar mais intuitiva e usá-la para contar o tempo percorrido -> updateProgressBar para updateProgress. Vamos apenas retirar o Bar do nome…
Vamos modificar nos eventos:
E na função:
function updateProgress() {
const barWidth = (song.currentTime / song.duration) * 100;
currentProgress.style.setProperty('--progress', `${barWidth}%`);
}
function jumpTo(event) {
const width = progressContainer.clientWidth;
const clickPosition = event.offsetX;
const jumpToTime = (clickPosition / width) * song.duration;
song.currentTime = jumpToTime;
}Por que vamos fazer essa mudança?
Esta função atualiza tanto a barra de progresso quanto o tempo da música, mudando o nome podemos fazer com que ela controle todo o tempo da música, podemos com isso excluir uma das funções e apenas incrementar a que já temos.
Vamos excluir então a que fizemos agora para contar o progresso da música…
function updateCurrentTime() {
songTime.innerText = song.currentTime;
}E vamos incrementar esta ação na função que já fazia este cálculo para nós, a updateProgress que modificamos o nome…
function updateProgress() {
const barWidth = (song.currentTime / song.duration) * 100;
currentProgress.style.setProperty('--progress', `${barWidth}%`);
songTime.innerText = toHHMMSS(song.currentTime);
}Acrescentamos a ela uma única linha de código e assim, a contagem do tempo já vai funcionar perfeitamente no nosso display.
Nesta aula conseguimos configurar o botão de repetir a música, suas funções e cores e também ajustar os tempos na nossa barra de progresso.
Na próxima aula vamos dar continuidade ao nosso Projeto Web de JavaScript! Até breve!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Hoje vamos para a décima e última aula do nosso Curso Básico de JavaScript para criar o nosso primeiro projeto web JavaScript!
Nessa aula nós vamos finalizar o nosso projeto para criar o player de música funcional usando o JavaScripy.
Para essa aula nós vamos fazer a parte de atribuir função ao botão no JavaScript, que já vimos em outras aulas, mas dessa vez vamos fazer isso para o botão de like no player de música.
Vamos criar também uma função para desenhar o botão de like, ou seja, para que você consiga visualizar que ele foi pressionado.
Além disso vou falar sobre o armazenamento local do navegador, que é como você vai armazenar informações no navegador para que elas fiquem salvas.
A ideia é que quando você der like em uma música, essa informação fique salva, pois no código não temos um banco de dados para registrar essas informações, então podemos salvá-la no próprio navegador!
E aí? Pronto para finalizar seu Player? Então bora para a aula!
Vamos começar pelo botão de Like? Então vamos a ele!
const songName = document.getElementById('song-name');
const bandName = document.getElementById('band-name');
const song = document.getElementById('audio');
const cover = document.getElementById('cover');
const play = document.getElementById('play');
const next = document.getElementById('next');
const previous = document.getElementById('previous');
const likeButton = document.getElementById('like');
const currentProgress = document.getElementById('current-progress');
const progressContainer = document.getElementById('progress-container');
const shuffleButton = document.getElementById('shuffle');
const repeatButton = document.getElementById('repeat');
const songTime = document.getElementById('song-time');
const totalTime = document.getElementById('total-time');
Primeiro vamos criar a referência -> CONST.
Feito isso, nosso objetivo é trocar o ícone de coração vazado para um ícone de coração preenchido e pintado de verde. Assim vai ficar mais fácil de ver quando o botão de like estiver acionado.
Vamos buscar o ícone de coração preenchido no mesmo site que usamos anteriormente o Bootstrap.
Um ponto importante de evidenciar é que a variável que vamos usar, deve ser individual para cada música, isso por o like ser algo que uma música pode ter ou não.
Por este motivo apenas uma variável simples não vai resolver o nosso problema.
Logo nas primeiras aulas nós criamos algumas variáveis que funcionavam como uma carteira de identidade de cada música, você lembra?
Vamos usar estas mesmas variáveis para fazer a atribuição -> Liked: false,
const asYouWere = {
songName: 'As You Were',
artist: 'TrackTribe',
file: 'as_you_were',
liked: false,
};
const boomBapFlick = {
songName: 'Boom Bap Flick',
artist: 'Quincas Moreira',
file: 'boom_bap_flick',
liked: false,
};
const cantHide = {
songName: "Can't Hide",
artist: 'Otis Mcdonald',
file: 'cant_hide',
liked: false,
};Já temos a informação dentro de cada música de maneira individual, precisamos fazer a função que vai trocar o botão de like e colorir.
Nesta função vamos repetir padrões de configurações já feitos anteriormente, usamos para o botão de play, por exemplo…
function likeButtonRender() {
if (sortedPlaylist[index].liked === true) {
likeButton.querySelector('.bi').classList.remove('bi-heart');
likeButton.querySelector('.bi').classList.add('bi-heart-fill');
likeButton.classList.add('button-active');
} else {
likeButton.querySelector('.bi').classList.add('bi-heart');
likeButton.querySelector('.bi').classList.remove('bi-heart-fill');
likeButton.classList.remove('button-active');
}
}
function initializeSong() {
cover.src = `images/${sortedPlaylist[index].file}.webp`;
song.src = `songs/${sortedPlaylist[index].file}.mp3`;
songName.innerText = sortedPlaylist[index].songName;
bandName.innerText = sortedPlaylist[index].artist;
likeButtonRender();
}Resumo – Função
Observe que nossa função pega a informação que está no Liked da música que está sendo tocada -> sortedPlaylist[index].
Se o Liked for verdadeiro então a função remove o botão de coração vazado (‘bi-heart’) e adiciona o botão de coração colorido (‘bi-heart-fill’).
A cor do botão é tratada na próxima linha, cor verde, quando a função adiciona o (‘button-active’).
Else -> caso contrário, ou seja, no caso de Liked falso…
Toda a ação anterior é revertida:
Botão vazado é adicionado (‘bi-heart’)
Botão preenchido removido (‘bi-heart-fill’)
Cor removida (‘button-active’)
Estímulo -> Evento
Feito isso, nossa função já esta pronta para executar uma ação, falta receber o estímulo que é o clique, porem, ainda não programamos este estímulo.
Vamos fazer isso agora?
Para fazer vamos utilizar o mesmo processo feito nas últimas aulas, vamos acrescentar um evento:
play.addEventListener('click', playPauseDecider);
previous.addEventListener('click', previousSong);
next.addEventListener('click', nextSong);
song.addEventListener('timeupdate', updateProgress);
song.addEventListener('ended', nextOrRepeat);
song.addEventListener('loadedmetadata', updateTotalTime);
progressContainer.addEventListener('click', jumpTo);
shuffleButton.addEventListener('click', shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);
likeButton.addEventListener('click', likeButtonClicked);Agora vamos criar a função deste evento -> likeButtonClicked, esta função vai receber a informação do estímulo (ação do clique) e vai trocar de falso para verdadeiro o status do like para a música que estiver sendo tocada.
Caso o like seja verdadeiro vamos acrescentar no final desta função a função que fizemos anteriormente -> likeButtonRender para que a troca do botão seja executada.
Resultado:
function likeButtonClicked() {
if (sortedPlaylist[index].liked === false) {
sortedPlaylist[index].liked = true;
} else {
sortedPlaylist[index].liked = false;
}
likeButtonRender();
}
initializeSong();
play.addEventListener('click', playPauseDecider);
previous.addEventListener('click', previousSong);
next.addEventListener('click', nextSong);
song.addEventListener('timeupdate', updateProgress);
song.addEventListener('ended', nextOrRepeat);
song.addEventListener('loadedmetadata', updateTotalTime);
progressContainer.addEventListener('click', jumpTo);
shuffleButton.addEventListener('click', shuffleButtonClicked);
repeatButton.addEventListener('click', repeatButtonClicked);
likeButton.addEventListener('click', likeButtonClicked);Nós até podíamos parar por aqui, mas vamos dar um passo além…
Se deixarmos como está, assim que reiniciarmos o aplicativo as informações de like são perdidas, sim, porque não temos nenhuma variável guardando essa informação de like.
Como armazenar essas informações?
Para isso vamos introduzir o conceito de back-end e front-end
Back-end -> É tudo o que está por trás do site, tudo que vai rodar no servidor, que o usuário ou leitor não tem acesso direto e não consegue interagir.
Front-end -> Corresponde à parte em que os usuários conseguem ver e interagir, como cores, fontes, menus, imagens entre outras funcionalidades.
Como aqui não temos um servidor com um banco de dados para armazenar as informações (Back-end) vamos ter que fazer de outra forma…
Navegador
Para isso vamos usar o navegador, pode ser o que você costuma utilizar.
O navegador tem um espaço no qual podemos armazenar informações -> storage location. Neste espaço podemos armazenar informações para usar depois quando houver necessidade.
A ideia aqui é armazenar as informações de like para usá-las depois sempre que carregarmos o aplicativo.
function likeButtonClicked() {
if (sortedPlaylist[index].liked === false) {
sortedPlaylist[index].liked = true;
} else {
sortedPlaylist[index].liked = false;
}
likeButtonRender();
localStorage.setItem('playlist', JSON.stringify(originalPlaylist));
}Vamos incluir na nossa função o localStorage que é um local conhecido pelo JavaScript. Vamos definir que ele irá armazenar uma informação usando o setItem.
Entre parênteses vamos colocar ter que inserir 2 informações -> o nome que vai identificar esse registro e a lista de música sendo a nossa array -> originalPlaylist.
Como verificar se esta informação está sendo salva?
Para visualizar este espaço de armazenamento e o que estamos armazenando vamos utilizar no navegador o atalho F12.
Vai aparecer a caixinha abaixo -> clique em Application
Note que a informação foi armazenada ‘playlist’, note também que a descrição desta informação é uma sequencia de repetição da palavra object.
Isso ocorre porque este ambiente de armazenamento lida melhor com valores textuais, já que a segunda informação no nosso localStorage é uma array -> originalPlaylist, então o que aparece para nós é esse valor confuso no identificador.
É possível transformar nossos dados originais em uma string (texto)?
Sim, nós vamos usar o JSON.stringify para fazer essa modificação. Entenda que nós vamos conseguir manter os nossos dados, apenas o servidor vai entendê-los como texto.
function likeButtonClicked() {
if (sortedPlaylist[index].liked === false) {
sortedPlaylist[index].liked = true;
} else {
sortedPlaylist[index].liked = false;
}
likeButtonRender();
localStorage.setItem('playlist', JSON.stringify(originalPlaylist));
}Resultado
[{songName: "As You Were", artist: "TrackTribe", file: "as_you_were", liked: true},...]
0: {songName: "As You Were", artist: "TrackTribe", file: "as_you_were", liked: true}
artist: "TrackTribe"
file: "as_you-Were"
liked: true
songName: "As You Were"
1: {songName: "Boom Bap Flick", ar "Quincas Moreira", file: "boom_bap_flick", liked: true}
2:{songName: "Can't Hide", artis ; Mcdonald", file: "cant_hide", liked: false}Observe que agora as informações estão muito mais claras e fáceis de identificar, até a informação de Liked está sendo mostrada para nós!
Ajuste – Array
Vamos fazer um ajuste para que a informação do array seja recuperada das informações salvas no navegador (playlist), para isso vamos substituir a informação destacada na imagem abaixo.
const cantHide = {
songName: "Can't Hide",
artist: 'Otis Mcdonald',
file: 'cant_hide',
liked: false,
};
let isPlaying = false;
let isShuffled = false;
let repeatOn = false;
const originalPlaylist = [asYouWere, boomBapFlick, cantHide,];
let sortedPlaylist = [...originalPlaylist];
let index = 0;Novamente iremos usar o JSON, mas desta vez com a função JSON.parse que vai fazer o caminho inverso da JSON.stringify, ou seja, a informação do navegador que está sendo entendida como texto volta a ser entendida novamente como dado estruturado.
const cantHide = {
songName: "Can't Hide",
artist: 'Otis Mcdonald',
file: 'cant_hide',
liked: false,
};
let isPlaying = false;
let isShuffled = false;
let repeatOn = false;
const originalPlaylist = JSON.parse(localStorage.getItem('playlist'));
let sortedPlaylist = [...originalPlaylist];
let index = 0;Agora se nós fecharmos a playlist e abrirmos novamente com o botão de like selecionado, note que a informação do like retorna normalmente.
Tratando um possível erro
Só temos um problema, que é melhor tratarmos antes que aconteça de fato.
Já que o nosso código está recuperando a informação do navegador, o que vai acontecer se a informação salva no navegador se perder?
Vamos excluir a informação do navegador para exemplificar esta situação e ver como o código lida com isso.
O resultado é que o código não lida…
Vamos ter um erro, se pararmos para pensar este é um erro comum, porque se estamos buscando a informação do navegador para rodar nossa playlist, então, na primeira vez que rodarmos o código no navegador o erro já vai existir porque no primeiro acesso ele não encontra nenhuma informação salva anteriormente.
Operador de coalescência nula (??)
Para corrigir este erro vamos usar o operador de coalescência nula (??), este é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é nulo ou inválido.
Em outras palavras se o que existe do lado esquerdo do operador for inválido, então, passa a valer o que estiver a direita do operador.
Vamos usar o operador e colocar a direita o que tínhamos antes de colocar o JSON no código, assim em um eventual problema nós damos uma opção viável para não acontecer o erro.
};
let isPlaying = false;
let isShuffled = false;
let repeatOn = false;
const originalPlaylist = JSON.parse(localStorage.getItem('playlist')); ?? [
asYouWere,
boomBapFlick,
cantHide,
];Feito isso podemos rodar nossa playlist normalmente, agora ela não apenas toca as músicas, nós podemos gravar os likes, podemos embaralhar e usar à vontade nossa playlist personalizada!
Espero que tenham curtido fazer este projeto! Acompanhem o canal para estar por dentro dos novos projetos que virão!
Chegamos ao final do Projeto Web de JavaScript. Até mais impressionadores!
A ideia desse Projeto Web de JavaScript é que você não só consiga criar um player de música, mas que consiga entender melhor como funciona o JavaScript e como você pode utilizar essas ferramentas.
Ao final da aula você tem um projeto completo do player de música, mas tem bastante conhecimento para fazer alterações e criar seus próprios projetos.
É importante que você pratique e que tente fazer algumas modificações dentro dos códigos para verificar como ele se comporta!
Lembrando que a cada aula vamos evoluindo e entendendo as possibilidades que estas ferramentas trazem para concluir o nosso Projeto Web de JavaScript.
Se quiser saber mais sobre JavaScript vou deixar o link da nossa aula introdutória para você!
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Power BI e virar uma referência na sua empresa? Inscreva-se agora mesmo no Power BI Impressionador