Diversão com Javascript: crie um aplicativo leitor de música!

1. Boas-vindas ao curso!: Ei, bem-vindo a esta aula. Se você é um iniciante de desenvolvimento web e quer apenas entrar e construir alguns projetos divertidos, você veio ao lugar certo. A idéia por trás desta série é mostrar o que você pode fazer com HTML normal, CSS e JavaScript. Eu não vou estar usando quaisquer frameworks, qualquer placa, quaisquer bibliotecas ou quaisquer modelos. Em vez disso, vamos construir tudo completamente a partir do zero passo a passo para mostrar como essas tecnologias gratuitas funcionam juntas. Durante este curso, vamos baixar várias músicas que vamos incluir em nosso aplicativo. Então vamos listar estes lá em baixo. Uma vez que o usuário clica em qualquer uma dessas músicas, então temos acesso a todos os controles no topo aqui, vamos clicar no botão play, podemos pausar, podemos ajustar o volume. Vemos exatamente qual música está sendo reproduzida no momento e também temos essa barra de progresso que é atualizada sobre a duração da música. Isto é o que vamos criar. Vamos criar isso completamente do zero usando HTML, CSS, e torná-lo totalmente interativo usando JavaScript. Nós também vamos adicionar algumas animações agradáveis quando clicamos em uma música, fazer esses fones de ouvido saltados também. Esta aplicação irá ensinar-lhe uma ampla gama de habilidades, incluindo áudio HTML, trabalhando com estilo CSS e animações. Claro que haverá muito JavaScript também. Teremos matrizes de músicas que irão percorrer e, em seguida, exibir no navegador. Vamos adicionar ouvintes de eventos, para que esta música seja ativada quando o usuário clica nela. Trabalharemos com controles de áudio para reproduzir, pausar, recarregar, controles deslizantes de volume, trabalhar com o tempo e duração da música, e muito mais fundamentos de JavaScript, como strings de modelo, trabalhar com funções, declarações condicionais, constantes, e muito mais. Esta classe é projetada para iniciantes em JavaScript. No entanto, tenha em mente que este é o sexto projeto neste JavaScript Fun Series, então, se você é um iniciante em JavaScript, eu recomendaria que você passe pelos primeiros projetos para começar, para lhe dar uma boa base para chegar em nesta fase. Embora se você tiver alguma experiência em JavaScript você poderia simplesmente saltar direto para este projeto. Obrigado por se interessar. Espero que esta aula seja agradável e te vejo dentro da primeira lição. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula. Você pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu na aula. Além disso, lembre-se de compartilhar seu Projeto 2 aqui no Skillshare. Não só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Onde encontrar áudio para o seu aplicativo: Antes de começarmos com nosso aplicativo player de música, também precisamos encontrar algumas músicas para poder tocar dentro de nosso app. Então, se você tiver alguns arquivos MP3 ou alguns arquivos de áudio que deseja usar, você pode, naturalmente, usar esses existentes e colocá-los em uma pasta chamada músicas. Aqui eu tenho seis músicas prontas, que eu vou usar este aplicativo. Tudo o que você precisa fazer é arrastar sobre todos os arquivos de música existentes que você possa ter e colocá-los em uma pasta de músicas. Alternativamente, se você não tiver nenhuma música disponível, há muitos sites disponíveis para baixar alguns arquivos. Vou usar os arquivos de áudio do bensound.com, e bensound.com é uma maneira de baixar algumas músicas livres de royalties para usar em nosso aplicativo. Podemos selecionar a música por diferentes gêneros. Podemos selecionar tudo. Temos também todos os rótulos diferentes acima do topo aqui, podemos percorrer as páginas. Então, uma vez que você encontrar algumas músicas que gostamos, podemos clicar no download. Vemos que temos algumas opções para baixar. Podemos usá-lo com uma licença gratuita se fornecermos algumas atribuições à oferta. Tudo o que precisamos fazer é escrever um link em nosso projeto para o site. Se você gosta de qualquer áudio que está neste site, vá em frente e baixe alguns destes e coloque-os na pasta de músicas. Há também uma licença Pro disponível para compra também. Isto é, se não quisermos fornecer nenhuma atribuição. Vá em frente e baixe algumas músicas que você gostaria de usar. Coloque-os na pasta de músicas e começaremos a criar isso no próximo vídeo. 4. Estrutura em HTML e reprodução de áudio: Agora você deve ter uma pasta de música pronta com algumas músicas que você deseja reproduzir dentro deste aplicativo. Para começar, este será o projeto que vamos construir. Será um aplicativo de reprodutor de música, que nos permitirá adicionar alguns arquivos de áudio ao nosso projeto, e depois reproduzi-los dentro deste app. Vamos percorrer todas as músicas dentro da pasta do nosso projeto, que é exibida em baixo na parte inferior. Podemos então clicar em qualquer uma dessas músicas. Vamos ver um pouco de animação de pulso com o cabeçalho, e nossa música está tocando agora. Nós também temos alguns controles de áudio personalizados, temos o botão “Play”. Temos o botão “Pausar”, e também podemos controlar o volume para baixo na parte inferior. Isto vai ter uma barra de progresso de áudio também, que possamos ver o quão longe através desta música nós realmente estamos. Tenho certeza que você está ansioso para começar com este projeto. Vamos criar uma nova pasta na área de trabalho. Vamos chamar isto de “leitor de música”. Arraste sobre a nossa pasta de músicas. Então podemos abrir isso no Visual Studio Code. A primeira coisa que precisamos fazer é criar uma página de índice dentro do nosso leitor de música. Vamos clicar em um novo arquivo, e este é o index.html. Você também tem a opção de usar a mesma imagem de fones de ouvido que usei aqui. Ou você também pode baixar o seu próprio também. Se você quiser usar exatamente a mesma cabeça para o mesmo repositório do GitHub que usamos ao longo deste curso, vá para o aplicativo player de música, e então veremos um headphones.svg. Se clicarmos sobre isso, podemos então clicar no ícone “Código”, que então nos dará todo o código SVG que precisamos adicionar ao nosso projeto. Vamos pegar todo esse código e, em seguida, criar um novo arquivo dentro da barra lateral. Eu quero chamar meu novo headphones.svg. Cole nosso conteúdo e salve este arquivo. Voltaremos a isso em um momento quando chegarmos a esse estágio em nosso HTML. Mas, por enquanto, precisamos criar nossa estrutura HTML com o atalho Emmet, que é HTML5. Aperte “Enter”. Então podemos mudar o título do nosso documento para ser “Music Player”. A interface do usuário para este projeto é relativamente simples. Vamos começar criando nossa imagem sobre o topo, dentro de um contêiner principal. Em seguida, abaixo deste terá o nosso reprodutor de áudio. Vou listar as músicas. Nós também usaremos os controles de áudio padrão apenas por agora, e então vamos substituí-los no próximo vídeo. Em primeiro lugar, dentro da seção do corpo, vamos criar uma div, que é o invólucro para o nosso projeto completo. Esta div vai ter a classe de jogador. Isso é apenas para que possamos adicionar algum estilo CSS em um próximo vídeo. A imagem será a imagem que você acabou de baixar do GitHub, ou você pode usar a sua própria, se preferir. Na fonte, o meu é o “headphones.svg”, apenas texto alt também. Vamos verificar este é o trabalho em, abrindo nossa página de índice dentro do navegador. Copie o caminho. Cole isto e há o nosso SVG na tela. A próxima coisa a fazer é ainda dentro desta seção principal de div, é realmente criar nosso reprodutor de áudio, que vai tocar nossas músicas. HTML tem um elementos de áudio. Vamos adicionar isso. Esta tem a etiqueta de abertura e de fechamento. Dê-nos uma idéia dos jogadores para que possamos usar isso dentro do JavaScript mais tarde. Então precisamos fornecer uma fonte de áudio com a qual o player de áudio vai trabalhar. Usamos isso com o elemento fonte. Este é um elemento de fechamento automático, então não precisamos ter uma tag de fechamento. Também para fins de JavaScript, mais tarde, vamos nos dar uma idéia de fonte, para que possamos definir isso dinamicamente a partir de nosso script. Isso também precisa de atributos de origem. A partir daqui podemos passar em qualquer uma de nossas músicas, que está dentro de nossa pasta de músicas. Podemos selecionar qualquer um destes. Isso realmente não importa por enquanto isso apenas para nossos propósitos de teste. Temos nosso reprodutor de áudio e também uma fonte. Então, logo depois disso, vamos adicionar algum texto, que será áudio não suportado. Agora, o reprodutor de áudio já existe há algum tempo, mas se eles o usam, ele está usando um navegador realmente antigo ou um navegador que não suporta áudio. Este texto será exibido na tela no lugar. Depois do reprodutor de áudio, podemos começar a trabalhar com a criação nossa lista de músicas com um título de nível dois das minhas músicas. Nossa lista de músicas será embrulhada dentro de uma div, com uma identificação da lista de músicas. Por enquanto, vamos exibir uma lista mais antiga que foi para a saída. Os nomes de todas as músicas dentro da nossa pasta de músicas. Nosso primeiro item da lista vai ser a primeira música que está dentro da nossa pasta de músicas. Vamos abrir isto. Então precisamos digitar uma música exatamente como ela aparece dentro daqui. O primeiro é da extensão “bensounds-clapandyell.mp3". Estou usando seis músicas diferentes aqui, que começam com Bensound. Vou duplicar isso mais cinco vezes. O segundo é “Dance”. O terceiro, “Funky Element”. Depois “Felicidade”. “ Pedra Feliz”. Então o último é “The Lounge”. Podemos atualizar o navegador ou também podemos fazer uso do servidor live. Vou até o comando “View” e entrar no Command Palete e, em seguida, fazer uma pesquisa pelo servidor live. Então abra isso com o servidor ao vivo. Agora, dentro do navegador, temos nossa imagem de fones de ouvido. Também temos nossa lista de músicas, mas atualmente não vemos nada relacionado ao nosso reprodutor de áudio. Isso ocorre porque para fazer isso aparecer na tela, também precisamos adicionar os controles. Este é um atributo e isso vai garantir que nosso player de áudio seja exibido no navegador e inclui todos os controles necessários que precisamos para controlar nossas músicas, que é a reprodução, um controle deslizante de volume, e também a duração da música. Como já definimos a fonte para ser uma de nossas músicas, agora podemos pressionar “Play” dentro do navegador. Nossa música vai agora começar a peça. Este é o básico do nosso HTML e também um reprodutor de áudio padrão HTML 5. No entanto, embora não vamos usar este reprodutor de áudio para o nosso projeto. Vamos passar agora para o próximo vídeo, onde vamos criar um reprodutor de áudio personalizado. 5. Controles de áudio personalizados: Como vimos no vídeo anterior, agora temos controles que são os controles de áudio padrão fornecidos com o player de áudio HTML5. Agora vamos criar nossos próprios controles para este projeto, que inclui o botão play, o botão de pausa, e também a barra de volume e progresso. A maneira como vimos no último vídeo, para remover isso é remover nosso atributo controles que está dentro do player de áudio. Se salvarmos isso, veremos que nosso player de áudio agora é removido do navegador. Do nosso elemento fonte logo abaixo, também podemos remover o atributo source, já que vamos adicionar isso dinamicamente usando JavaScript. Agora que removemos esses controles, agora precisamos ir em frente e criar o nosso próprio. Para fazer isso, vamos logo abaixo do nosso player de áudio e criamos uma nova div que vai ter o ID de controles. Esta seção de controle, se formos para a versão final vai ter o texto no topo com a música em reprodução atual. Teremos um botão de reprodução e uma pausa, juntamente com um controle deslizante de volume para baixo na parte inferior. Há uma seção de controle. Se formos para a versão final, isto vai ter o texto de tocar agora e, em seguida, a música de reprodução atual. Teremos nossos ícones para jogar e pausar. Em seguida, nosso controle deslizante de volume para baixo na parte inferior. Vamos começar com o nosso elemento p, que vai ser para o nosso texto para a música que está tocando atualmente. Estes elementos p estarão vazios por agora, já que vamos definir isso via JavaScript, mas podemos definir isso por enquanto com um ID da música atual. Logo depois disso, podemos criar uma div que é um wrapper para todos os jogos em nossos botões de pausa. A classe para este wrapper vai ser wrapper controles, isto é para o nosso CSS. Então dentro vamos adicionar nossos dois elementos span e isso vai ter uma entidade HTML. O primeiro código de entidade HTML que vamos usar será para o nosso botão play. Isso tem o valor dos pontos e vírgula comercial, o hash, 9658, seguido pelo ponto-e-vírgula. O segundo vai ser para a nossa pausa e para fazer isso, vamos criar duas barras verticais como vemos na versão final aqui mesmo. O código que precisamos para isso é que o comercial, o áspero, 10074, e o ponto-e-vírgula. Vemos que temos apenas uma dessas barras verticais no momento, mas podemos copiar isso e colá-lo ao lado dela para nos dar o símbolo de pausa. Nós, em seguida, também precisa de uma seção de volume apenas soprar este div, então div p elementos irá detectar o volume. Uma div com a classe de volume e isso vai ser um wrapper para o nosso positivo, nossos símbolos negativos e também a entrada que vai ter o tipo de intervalo. Primeiro o símbolo negativo dentro de nossos elementos span, que é simplesmente um traço seguido por nossas entradas com o tipo de intervalo. Podemos controlar isso a partir do nosso JavaScript, dando-lhe um ID de controle deslizante de volume. Para o nosso volume, precisamos definir o intervalo para ser entre zero e um e podemos fazer isso com min igual a zero e o atributo max para ser igual a um. O atributo final desta etapa, eu vou definir isso para ser 0,01, e isso significa que nosso controle deslizante de intervalo quando vamos da esquerda para a direita, vai subir em estágios de 0,01. Isso nos dará um controle deslizante bastante suave como vamos da esquerda para a direita e logo depois disso, vamos ter que abranger um estranho no ícone mais. Este é agora o visual ou a seção HTML agora cuidada para nossos controles personalizados. Uma vez que estes são simplesmente elementos HTML eles não vão tocar nenhuma música no momento dentro do navegador, mas vamos corrigir isso muito em breve usando JavaScript. 6. Estilização com CSS: Passando para o estilo. Vamos até a barra lateral e criar nossas folhas de estilo, que eu vou chamar de styles.css. Podemos então vincular isso dentro do nosso índice, dentro da seção da cabeça com o elemento link. O relacionamento é uma folha de estilo, e esta é a nova raiz do nosso projeto. Podemos vincular isso com styles.css. Abra isso, e como sempre, vamos começar com nossa seção HTML definindo o tamanho da fonte raiz. Esta é apenas a maneira que eu faço as coisas definindo isso para ser 10 pixels. Para tornar os cálculos realmente fáceis ao converter isso com um REM. Mas, como sempre, você pode abordar isso de qualquer maneira diferente que você preferir. Sua seção de corpo para isso vai ter um fundo que será um gradiente linear. Em seguida, podemos adicionar dentro de nossos dois valores para misturar entre. O primeiro, um valor hexadecimal de 3b3b3b. A segunda vai ser bem parecida. Isto vai ser 2b2b2b. Se você estiver usando o servidor live, você pode simplesmente salvar o arquivo e isso irá atualizar o navegador imediatamente. Caso contrário, basta ir para o navegador e clicar em Atualizar. Após o fundo, também podemos definir a altura deste para ser 100 por cento. Isso irá esticar o plano de fundo à medida que obtivermos mais conteúdo. A cor atualmente no texto é um pouco escura demais para o plano de fundo. Então eu vou mudar isso para ser um valor de fumaça branca. Também um tamanho de fonte maior de 1,4 REMs. Também podemos centralizar isso com margem. Eu vou para dois REMs, que serão na parte superior e inferior, e então zero na esquerda e na direita. Algum estofamento, que vai nos dar algum espaço no interior desta seção cinzenta do corpo, também de dois REMs. Podemos centralizar o texto com text-align center. Depois disso, vamos para a página de índice. Podemos ver que dentro do corpo temos essa div com a classe de jogador. Isso vai cercar praticamente todo o conteúdo dentro. Assim como vemos apenas a versão final, vamos dar a isso uma cor de fundo, que é essa cor roxa, e também tem um gradiente radial. Temos a cor mais escura no centro, e então ela se espalha para ser uma cor mais clara do lado de fora. Nosso alvo é a classe de jogadores em nossa folha de estilo. Vamos definir nosso plano de fundo e o gradiente radial. Os dois valores que vou buscar serão 211e24. O segundo, novamente, um valor hexadecimal você isso é 4f3341. Agora vemos nosso gradiente radial, que vem do centro do fundo e se mistura com a borda externa. Depois disso, algum preenchimento para dar a isso algum espaçamento no interior do elemento de dois REMs, e então podemos arredondar os cantos desta seção roxa com nosso raio de borda. Agora o wrapper é cuidado, e agora precisamos mover para dentro desta seção do jogador e, em seguida, começar a trabalhar com nosso conteúdo. No topo, temos esta imagem e a imagem é um pouco grande demais para o nosso projeto. Se entrarmos em nossa folha de estilo, podemos mirar isso. Em seguida, podemos restringir a largura para ser de 50% do espaço disponível. Depois da nossa imagem, não precisamos fazer nada com esta seção de áudio porque estamos usando nossos próprios controles personalizados, que estão listados logo abaixo. Esta seção de controle tem o ID de controles. Vamos usar é adicionar uma borda e também algum preenchimento para a seção, assim como vemos na versão final. A idéia de controles, nós miramos isso com o hash. A borda, isto vai ser um pixel de largura, uma cor de cinza claro ardósia. Esta também vai ser uma linha sólida. Para arredondar os cantos, podemos adicionar nosso raio de borda de 10 pixels ou também podemos fazer um REM. Também alguns estofamento no interior da seção para dar-lhe algum espaçamento de nossos controles. Atualmente, agora vemos menos conteúdo na tela, uma vez que tornamos a imagem um pouco menor. Agora podemos ver que a cor de fundo cinza que tínhamos para a seção do corpo não está cobrindo a altura total da página. Para corrigir isso, podemos alterar a altura para ser 100 por cento da altura da placa de visualização atual, que é a altura do navegador. Podemos também certificar-nos de que este é o mínimo também. Vá até o nosso HTML e, em seguida, dentro aqui, temos esta classe de wrapper controles. Aqui dentro, isto contém os nossos dois vãos que têm nossos ícones para os controlos de reprodução e pausa. Podemos mirar todos esses elementos divertidos que estão dentro do nosso invólucro de controle. Voltemos aos nossos lençóis de estilo. Podemos, então, direcionar o controls_wrapper. Em seguida, podemos selecionar todos os elementos span que são imediatamente seguir esta div. Dentro daqui queremos ter certeza de que o cursor do mouse é um ponteiro. Isso mudará nosso ponteiro cada vez que passarmos o mouse sobre qualquer um desses ícones. A cor, isso vai combinar com a borda, então isso vai ser cinza claro ardósia. Podemos torná-los maiores com o tamanho da fonte de seis REMs. Algum preenchimento para dar a isso algum espaçamento. Então vamos passar para as nossas músicas. Primeiro de tudo, dentro deste wrapper, também temos este elemento p com o ID de CurrentSong. Cada vez que o usuário clica em qualquer uma dessas músicas, vamos pegar o nome da música, e então colocar isso no topo. Nós também precisamos lidar com o que fazer se o título de uma música é realmente longo, já que não queremos que isso seja derramado fora da borda da tela. A maneira de fazer isso, se pegarmos nossa ID, que é CurrentSong, e usarmos o hash. Tudo o que vamos fazer para evitar isso é definir a propriedade overflow e definir isso para ser oculto. Isso basicamente vai esconder o resto do título, que é muito largo para caber dentro do recipiente. Se o nosso título estivesse do outro lado da página, assim que chegasse ao limite da nossa div, o resto do texto ficaria oculto. Também podemos fazer o mesmo na nossa lista de músicas. Então vamos rolar para baixo. A seção de música tem este ID de SongList. Vamos fazer o mesmo, vamos definir o estouro para ser escondido. Também podemos alinhar todos os textos à esquerda da nossa seção. Cada uma de nossas músicas é um item de lista. Voltando ao nosso HTML, temos nossa lista de itens que envolvem cada uma dessas músicas. Também podemos mudar o cursor para ser um ponteiro cada vez que o usuário passa o mouse sobre qualquer uma dessas músicas, assim como fizemos com nossos ícones. Nosso item da lista. O cursor vai ser um ponteiro. Também 1.5 REMs de preenchimento para nos dar algum espaçamento entre cada uma das nossas músicas. Temos nosso espaçamento, e também podemos ver que o cursor muda para um ponteiro quando passamos o mouse sobre cada um deles. Também podemos ter certeza de que a cor de fundo muda para ser uma cor vermelha correspondente a esses fones de ouvido. Vamos fazer isso quando passarmos o mouse sobre qualquer um desses itens da lista, então li. Podemos selecionar o estado de foco. Tudo o que vamos fazer é definir a cor de fundo para ser um valor vermelho, que é f3644b. Esta é agora a base do estilo para a nossa aplicação, e também parece muito bom na tela pequena. No entanto, se tornarmos isso muito mais amplo, podemos querer introduzir uma consulta de mídia para restringir a largura máxima desta seção corpo. Vamos adicionar isso na parte inferior na mídia, e então vamos selecionar todas as nossas telas com uma largura mínima de 800 pixels. Selecione nossa seção de corpo e, em seguida, podemos definir a largura máxima para ser 60 por cento da largura da barra de visão. Além disso, o tamanho da fonte, vamos aumentar isso para 1,8 REMs. A seção do corpo agora está restrita, mas também precisamos colocar isso de volta no centro. Vamos fazer isto. Se voltarmos para a seção original do corpo e dentro da margem, estamos definindo dois REMs em margem na parte superior e inferior. Coloque zero na esquerda e na direita. Podemos corrigir isso definindo isso para ser automático, e isso irá dividir qualquer margem restante à esquerda e à direita igualmente. Este é o estilo agora feito para o nosso aplicativo. Em seguida, vamos passar para adicionar JavaScript para listar todas as nossas músicas. 7. Listando as nossas músicas em Javascript: O próximo passo para este projeto é adicionar nosso script. Abrir a barra lateral foi criar o nosso novo script.ks. Dentro da página de índice, você pode vincular isso logo acima da tag body de fechamento. Os scripts têm a fonte dentro da nossa raiz. Este é simplesmente o script.js. Para começar, vamos pegar todos os nossos itens de lista, colocá-los dentro de uma matriz, e, em seguida, criar um loop FER que vai colocar estes de volta dentro desta seção. Pegue cada um de nossos itens da lista. Vou copiar isto para os nossos guiões. No momento, este não é um JavaScript válido. Vamos mover isto para a nossa matriz. A nossa matriz vai ser chamada de canções. Então vamos passar por cima de cada um dos nossos itens da lista e colocá-los dentro das cotações. O primeiro, separado por vírgula, pegue nosso segundo, coloque isso dentro das aspas, eu vou adicionar uma vírgula entre cada um desses itens da matriz, colocá-los dentro da matriz. Também podemos remover cada um desses itens da lista. Agora que cada uma de nossas músicas está dentro de nosso JavaScript, podemos então voltar para nossa página de índice e remover esta lista completa ordenada. Isto é porque nós estamos indo para criar uma função que vai selecionar a nossa lista de músicas e, em seguida, colocar dentro uma nova lista de ordem que foi criado a partir de JavaScript. Para fazer isso, vamos criar uma função chamada criar lista de músicas. A primeira coisa que precisamos fazer dentro desta função é criar uma nova lista ordenada. Fazemos isso com document.createElements, que está em nossa lista ordenada. Também precisamos instalar isso dentro de uma constante para que possamos adicionar cada item da lista. Mas como vamos criar seis novos itens de lista? Bem, poderíamos adicionar cada um desses individualmente, mas é muito mais eficiente criar um loop para fazer isso seis vezes. Vamos criar um loop FOR. Queremos que esse loop seja executado seis vezes ou tantas vezes quanto os itens da matriz. A maneira como podemos fazer isso funcionar seis vezes é criando uma variável. Eu vou chamar o meu i, e inicialmente definir isso para um valor de 0. A segunda declaração é quantas vezes queremos que esse loop seja executado. No momento, temos seis músicas separadas, mas não queremos adicionar um valor codificado. Em vez disso, podemos acessar nossa matriz de músicas e usar a propriedade de terra. Vamos manter isso funcionando desde que o valor de i seja menor que um songs.length. Então cada vez que este loop FOR é executado, vamos então incrementar o valor de i por um. Só para recapitular, vamos criar seis itens de lista. Para fazer isso, vamos usar um loop FOR. Para ter certeza que isso corre seis vezes, vamos usar uma variável chamada i. Na primeira vez que este loop é executado, i será igual a 0. Ele irá então continuar funcionando enquanto i é menor do que canções.length, que é igual a seis. Vou então incrementá-lo para ser um valor de um. Da próxima vez que este loop for executado, eu será igual a um, que é menor que o comprimento da nossa matriz de músicas. Isso continuará funcionando até o último loop, onde eu será igual a seis, que não é mais inferior a canções.length, fazendo com que nosso loop termine. Para começar, vamos criar nosso novo item de lista com Document.CreateElements. O elemento que queremos criar é um item de lista e armazená-lo dentro de um item chamado constante. Isso então nos levará com um elemento HTML como este. Então precisamos criar nosso conteúdo que está dentro. Por exemplo, em nosso primeiro loop queremos passar nos primeiros elementos dentro de nossa matriz. A maneira que podemos criar isso é usando criar um nó de texto. Como vamos criar esse conteúdo? O que podemos fazer isso com Document.CreateTextNode. O nó de texto que queremos criar é a partir da nossa matriz de músicas e o valor de i. No primeiro loop, i está em 0. Esta será a canção 0, que é a nossa primeira. No segundo ciclo, músicas são iguais a 1, este será o nosso segundo. Desde que você se lembra que os arrays começam em um índice de 0, isso nos dará o título da nossa música. Podemos então acrescentar isso ao nosso item. Remova isto. Podemos pegar nosso item, chamar o método chamado append child. Em seguida, podemos colar em nosso nó de texto. Depois disso, queremos pegar I vai alterar lista, que é armazenado dentro desta variável lista. Podemos então chamar append child e adicionar o nosso item de lista individual. No final de nossa função, podemos então retornar nossa lista ordenada recém-construída. Então podemos adicionar isso ao DOM se formos para a nossa página de índice. Lembre-se, temos essa div com o ID da lista de músicas. Vamos então colocar nossa lista de pedidos de volta dentro desta seção. Então de volta ao nosso roteiro e podemos pegar isso onde obtemos elemento por ID, onde queremos passar em nossa lista de músicas. Vamos acrescentar método filho. Em seguida, podemos passar na lista retornada de nossa função “Criar lista de músicas”. Isso agora adiciona todas as nossas músicas de volta ao nosso player. Atualmente, não podemos clicar em nenhuma dessas músicas para tocar. Isso vai ser algo que vamos consertar no próximo vídeo. 8. Reprodução dinâmica de músicas: Bom, então agora temos nossas músicas listadas dentro do navegador, e a próxima coisa que vamos fazer é permitir que o usuário clique em qualquer um desses títulos de música e, em seguida, carregue isso no player. A maneira como vamos fazer isso é, novamente, fazendo uso de nossa lista de músicas, e então nós vamos acionar uma função cada vez e isso é clicado. Ao invés de duplicar esta seção aqui, vamos resolver esta referência dentro de uma constante chamada SongList. Podemos então pegar nossa seção AppendChild que criamos no último vídeo, remover isso, e então podemos adicionar isso diretamente à nossa constante. Agora teremos a lista de músicas armazenada dentro de uma constante. Nós também podemos fazer uso disso e ouvir quaisquer cliques para a seção. Podemos fazer isso com uma propriedade chamada onclick, e isso vai acionar uma função. Esta função vai levar as informações do evento, e vamos dar uma olhada em exatamente quais informações estão incluídas com este evento, registrando isso no console. Agora vamos para o nosso console dentro do navegador. Clique em qualquer uma dessas músicas e, em seguida, veremos muitas informações são exibidas dentro do console. Vemos que este é um evento de mouse, vez que este foi clicado com o mouse. Em particular, a informação em que estamos interessados é este alvo aqui. Dentro do alvo, precisamos rolar para baixo e dar uma olhada no nosso InnerText. Podemos ver o InnerText contém o nome da nossa música. Se também tentarmos clicar em qualquer elemento diferente, como o número 4, podemos então voltar para o console, abrir isso, e dentro de nossos alvos e novamente para baixo para o nosso InnerText. Vemos que temos acesso ao título da nossa música mais uma vez, então o que precisamos fazer se formos para a nossa página de índice e rolar para o nosso player de áudio, lembre-se dos elementos de origem, nós movemos este atributo de origem no início. O que agora precisamos fazer é pegar nosso texto interno e, em seguida, substituir este como nosso novo atributo. A maneira de fazer isso: em primeiro lugar, se pegarmos uma referência à nossa fonte, e podemos fazer isso com um document.getElementByID. O ID para este elemento também é fonte, e agora podemos acessar nossa variável fonte, definir o atributo fonte, e o atributo vai ser o caminho do arquivo para nossa música, então todas as nossas músicas são armazenadas dentro dessas músicas pasta. Precisamos adicionar músicas, barra, e então, assim como vimos no Console, para obter o valor do nome da nossa música, precisamos acessar nossa variável de evento, o alvo e também o InnerText. Depois, há mais duas pequenas coisas que temos de fazer. Estas duas coisas é realmente carregar o áudio e, em seguida, a chamada para reproduzir função. Para fazer isso, precisamos de uma referência ao nosso jogador. Se voltarmos para o nosso HTML, nosso elemento de áudio abriga ID do player. Vamos pegar nossa referência, armazenar isso dentro de uma constante, Aqui jogador const. Este const é igual a document.getElementById, o ID é jogador. Em seguida, podemos usar esta variável player para, primeiro lugar, carregar chamada, que vai pré-carregar o áudio que definimos logo acima sem realmente reproduzi-lo dentro do navegador. Ele também removerá ou redefinirá todas as músicas carregadas anteriormente. Depois disso, mais uma vez acessamos nossa variável player. Mas desta vez, chamamos de “play “, que vai começar a tocar nossa faixa de áudio. Vamos tentar isto. Se formos para o navegador, clique em qualquer uma das nossas músicas, agora você deve ver que as músicas estão sendo reproduzidas imediatamente. Ótimo, então agora isso está no lugar. Eu só vou voltar para o nosso index.html. Se você também estiver usando algumas faixas de áudio, assim como eu estou, que precisa de alguma atribuição, você pode classificar isso dentro do HTML, e o que está no meu logo abaixo da lista de músicas. Eu quero adicionar isso como texto, então música, o meu é bensound.com. Vamos aninhá-lo dentro, vou adicionar um link com o elemento a. O link era https, este era bensound.com. Nós também pode pegar este link e colar isso em como o texto do link. O texto do link é um pouco difícil de ver, então podemos fazer uma pequena alteração em nosso CSS. Bem no fundo, pegue o nosso elemento. Também podemos definir uma cor correspondente para ser fumaça branca deixando nosso link muito mais visível. Com nossas músicas agora em reprodução, a próxima coisa que vamos fazer no próximo vídeo é também pegar o título da música e também exibir isso logo acima de nossos ícones. 9. Defina a música em reprodução: Este vai ser um vídeo muito simples. Tudo o que vamos fazer é pegar o título da música e, em seguida, exibir isso dentro do navegador. Vamos fazer isso é selecionar o nosso elemento p que criamos no início da página de índice. Este elemento p tem o ID de “CurrentSong” e está definido como vazio no momento. Vamos tentar isso com o ID, e podemos definir o texto interno. Podemos fazer isso quando selecionamos nossa nova música dentro desta função “onclick”. Vou fazer isto antes de carregarmos o áudio. Primeiro de tudo, vamos pegar nossos elementos. Podemos usar qualquer coisa como “getElementByID” ou podemos usar “QuerySelector”. Como vimos anteriormente, “QuerySelector” nos permitirá selecionar qualquer um de nossos elementos com um seletor semelhante a CSS. Então podemos selecionar como “div” ou, no nosso caso, temos um ID, então selecionamos com o hash, assim como faríamos em nosso CSS. O ID para este é o CurrentSong. Podemos então definir o texto interno de nossos elementos para ser igual a uma string. Se quiséssemos apenas exibir algum texto normal, poderíamos adicionar isso como uma string dentro das aspas. Mas porque queremos adicionar isso como uma string dinâmica que vai levar no título da música atual, precisamos inserir algumas variáveis para que possamos adicionar isso como uma string template. Então abra os backticks. Podemos começar com o texto de Now Playing, dois pontos, e, em seguida, inserir uma variável com o símbolo $ e as chaves. A partir do último vídeo, já sabemos como obter o título da música, e isso é armazenado dentro do nosso “e.target” e, em seguida, selecionamos o “InnerText”. Fazemos exatamente o mesmo aqui dentro. Selecione o “e.target.innerText” salvar este arquivo e sobre o navegador. Clique em uma música, e isso agora é exibido dentro do nosso reprodutor de áudio. 10. Controles de reproduzir e pausar: Neste vídeo, vamos ligar o nosso jogo e também os nossos botões de pausa para o nosso reprodutor de áudio. De volta em nossa página de índice, dentro de nosso wrapper de controles, temos nossos dois elementos de span. O primeiro é para o nosso botão play para que possamos adicionar um manipulador de eventos onclick, que vai acionar uma função chamada PlayAudio. Abaixo disso, temos o nosso botão de pausa, e isso vai ter um manipulador de cliques para. A função deste vai acionar, vai ser chamado de pausa de áudio. Salve este arquivo e agora para o nosso script, podemos configurar nossas duas funções. Bem na parte inferior, o primeiro foi PlayAudio. Dentro de nosso jogo e também nossas funções de pausa, precisamos acessar nosso reprodutor de áudio. Acima nesta seção onclick, já temos uma referência ao nosso jogador. No entanto, como isso foi declarado dentro desta função, não podemos acessá-lo em nenhuma outra parte do nosso programa. Para acessar esse jogo de todas as nossas seções ou torná-lo global, vamos cortar essa linha de código, e podemos colocar isso no topo. Agora esta variável de jogo não é declarada dentro de uma função. Isso agora está no escopo global para que possamos acessá-lo em qualquer função. Pouco antes de seguirmos em frente, vai salvar isso, e também verificar se nossas músicas ainda estão tocando quando clicamos em cada uma delas. Isso é bom. Agora podemos passar para a nossa função PlayAudio. Dentro daqui vamos criar uma instrução if, e esta declaração se vai verificar se o áudio terminou de carregar. Podemos fazer isso acessando nosso player em uma propriedade chamada ReadyState, então ReadyState retornará um valor verdadeiro ou falso. Se o estado pronto retornar true, isso significa que nosso áudio terminou de carregar e, portanto, podemos chamar player.play. Depois disso, nossa segunda função é pausar nosso áudio, e tudo o que precisamos fazer aqui é chamar player.pause, salvar este arquivo e agora podemos testar isso no navegador, dar a este arquivo uma atualização. Primeiro de tudo, clique em qualquer uma das nossas músicas, comece a tocar. Uma vez que isso começa, podemos testar nossa função de pausa clicando neste ícone, nosso áudio agora pára, e se clicarmos em reproduzir o áudio começa mais uma vez. Portanto, o nosso jogo e também as nossas funções de pausa estão agora a funcionar completamente. No próximo vídeo, vamos passar para o controle deslizante de volume para controlar o volume do nosso player. 11. O controle deslizante de volume: Agora vamos criar a funcionalidade para controlar o volume dentro do nosso reprodutor de áudio. Isso está sendo criado dentro de nossa página de índice como um controle deslizante de intervalo. Portanto, precisamos acessar esse elemento com nosso ID. No nosso script e na parte inferior podemos criar uma constante que vai armazenar uma referência ao nosso controle deslizante. Podemos selecionar isso com get elemento por ID. O ID que acabamos de ver é o controle deslizante de volume, acessar nossas constantes. Em seguida, podemos adicionar o manipulador de eventos de entrada na qual vai acionar uma função cada no valor do nosso controle deslizante gama mudou. Isso também vai levar as informações do evento. Vamos fazer um log de console e ver quais informações são armazenadas neste evento. ferramentas do desenvolvedor, clicamos com o botão direito do mouse e inspecionamos, clique no console. Então, se ajustarmos nosso controle deslizante de alcance, vemos que cada vez que o controle deslizante mudou, isso irá acionar um novo evento. Vamos expandir isto. Assim como olhamos anteriormente para acessar nosso elemento, selecionamos a propriedade alvo. Se rolarmos para baixo, podemos encontrar o valor do nosso elemento. Nosso controle deslizante tem o intervalo de 0-1 e atualmente temos uma configuração ou um valor de 0,43. Agora podemos usar esse valor, armazenar isso dentro de uma constante e, em seguida, definir nosso volume de reprodução. Primeiro de tudo, vamos criar a nossa constante para armazenar este valor chamado volume e definir este igual ao nosso evento que é armazenado em e. Vamos selecionar nosso destino e, em seguida, o valor como vimos dentro do console. Acesse nossa variável de jogo. Agora podemos definir o player.volume para ser igual à nossa variável de volume. Vamos tentar isso dentro do navegador. Escolha qualquer música. Deve começar a tocar. Vamos testar nosso controle deslizante voltando para zero e o áudio desapareceu, empurre isso para o volume total. Podemos agora aqui o nosso áudio em sua configuração mais alta. Com todos os nossos controles agora cuidados, agora vamos passar para o próximo vídeo e vamos criar nossa barra de progresso. 12. Atualizando a barra de progresso: Agora vamos criar uma barra de progresso dentro do nosso projeto, que será atualizada à medida que a música for tocada. Assim, esta barra de progresso estará logo no início assim que a música tiver começado, e a duração será atualizada à medida que a música progride. O primeiro passo é ir para a nossa “Página Índice” e podemos criar um elemento de progresso. Mas ainda assim, logo após nossa seção de áudio e podemos aproveitar os elementos de progresso HTML. Nós podemos atualizar isso, nós vamos ter um id, e este id vai ser igual ao progresso. O segundo atributo vai ser o valor que vamos inicialmente definir como zero. Isso definirá nossa barra de progresso para estar bem no início, e então vamos atualizar isso com JavaScript. Em seguida, podemos adicionar um máximo, que será igual a 100, então nosso valor da barra de progresso pode estar entre zero e 100. O segundo passo é ir até o nosso reprodutor de áudio e, em seguida, vamos adicionar um novo atributo chamado ontimeupdate. Ontimeupdate é um evento que é executado quando a posição do áudio foi alterada. Então, isto é, isso vai ser executado como o áudio está sendo reproduzido. O que precisamos fazer aqui dentro é passar qualquer função que queremos executar em cada atualização. Vou chamar essa função UpdateProgress, e então podemos criar isso em nosso script. Então, na parte inferior, o nome da função era UpdateProgress. Quando criamos nossa barra de progresso, damos a ela uma identificação de progresso. Podemos armazenar isso dentro de uma constante chamada ProgressBar e definir isso igual a documentos, getElementByID eo ID foi progresso. Também nesta barra de progresso, definimos um valor inicial de zero, e agora precisamos atualizar isso com JavaScript. Podemos fazer isso selecionando nossa constante ProgressBar e, em seguida, definir nosso valor para ser igual a uma porcentagem entre zero e 100. A maneira como vamos fazer isso é criando um cálculo. Este cálculo vai acessar tanto a hora atual e também a duração que está disponível em nossa constante jogador. Para ver isso, podemos comentar isso e apenas fazer um console.log. Primeiro de tudo, se nós console.log o valor do jogador e, em seguida no momento atual, vamos duplicar isso. Também podemos registrar a duração da faixa de áudio. A hora atual é a quantidade real de tempo decorrido enquanto tocamos a música. A duração logo abaixo é o comprimento total da faixa de áudio ou para o console. Para ver isso, podemos clicar em qualquer uma de nossas músicas para começar a reprodução. O primeiro valor, que veremos aqui, vamos pausar isso. Esta é a duração atual da nossa pista, e então veremos o comprimento da pista é de 176 segundos. Este valor será sempre o mesmo, uma vez que o comprimento não muda. Agora precisamos usar nossos dois valores para criar uma porcentagem entre zero e 100. A maneira como podemos fazer isso é agarrando nosso CurrentTime na cena e então podemos dividir isso pelo player.duration. Para transformar isso em uma porcentagem, então multiplicamos isso pelo valor de 100. Podemos então remover nossos logs de console e verificar isso no navegador. Selecione qualquer música. Este vou começar a tocar e a nossa barra de progresso está agora a ser actualizada. Apenas para terminar esta seção, nós também vamos adicionar um pouco de estilo CSS em nossa barra de progresso. Além disso, nossa folha de estilo, selecione nossos elementos de progresso. Vou começar definindo a largura para 100 por cento do espaço disponível. A altura da nossa barra de progresso para ser de três rems, e, em seguida, algum espaçamento na parte inferior, que é uma margem inferior. Então este arquivo terá agora algum estilo agradável para a nossa barra de progresso. À primeira vista, tudo parece funcionar completamente bem, no entanto, se entrarmos nas ferramentas do desenvolvedor e, em seguida, dentro do console, selecione uma de nossas músicas. Se abrirmos isso, e se expandirmos isso, podemos ver que temos uma mensagem de “Falha ao definir a propriedade “value”” em nossa barra de progresso. Isso pode parecer um pouco estranho no início porque nossa barra de progresso está totalmente atualizada dentro do navegador. No entanto, este erro é causado assim que a nossa música foi tocada. Isso está bem no início por causa do nosso player.duration. Vamos voltar para o nosso UpdateProgress e podemos fazer um console.log para o valor de player.duration. Vamos voltar para o console, atualizar. Assim que você fizer isso, vemos o valor de não um número. Assim que carregar, não temos dados de duração logo no início. Isso ocorre porque estamos chamando nossa função antes que a duração tenha sido definida. Para superar isso, só vamos chamar essa função quando a música começar a tocar. Vamos remover o console.log e também essas duas linhas de código dentro de nossa função. Podemos então criar uma instrução if, que vai verificar se o player.CurrentTime é maior do que zero e esta seção só será executado uma vez que o player de áudio tenha começado. Portanto, podemos passar em nossas duas linhas de código que acabamos de cortar e podemos tentar isso no navegador. Abra as ferramentas de desenvolvedor, selecione qualquer arco nossas músicas. Esta área agora vai embora. Estamos quase terminando nosso projeto e no próximo vídeo, vamos adicionar alguns retoques finais a este projeto. 13. Toques finais: Vamos agora terminar este projeto adicionando alguns toques finais. Vamos adicionar algumas fontes do Google. Nós também vamos adicionar uma pequena animação aos nossos fones de ouvido cada vez que uma faixa de áudio for selecionada. Também vamos corrigir um pequeno problema ao selecionar uma de nossas músicas. Primeiro de tudo, vamos ao Google Fonts. Vou pegar uma fonte para este projeto. A fonte que vou selecionar para este projeto será chamada de Marcador Permanente. Estou olhando para isso como nos projetos anteriores. Tudo o que precisamos fazer é selecionar nosso estilo, clicar em “Incorporar” e, em seguida, trazer nosso link para nossa página Índice. Depois disso, também precisamos de nossas regras CSS, então copie esta seção, na parte superior de nossas folhas de estilo, podemos então colar isso em nosso HTML, salvar isso e atualizar o player de música, e nossa fonte agora está tomando efeito. Por padrão, o espaçamento entre letras para esta fonte é bastante esmagado. Para dar a isso um pouco mais de espaçamento, vou adicionar uma propriedade chamada espaçamento de letras, e então dar a isso algum espaçamento de quatro pixels. Em seguida, vou adicionar uma pequena animação de pulso aos nossos fones de ouvido, cada vez que o usuário clicar em qualquer uma dessas músicas. Para fazer isso em nosso script, vamos adicionar uma nova classe à imagem de nossos fones de ouvido, e então podemos definir essa animação em nossa folha de estilos. Para pegar a imagem do nosso fone de ouvido, podemos adicionar um ID a este elemento, assim ID de fones de ouvido. Em seguida, podemos ir para o nosso script, e adicionar um novo nome de classe para esses elementos, cada vez que um usuário clica em qualquer uma dessas músicas, direita no final desta função. Vamos selecionar os documentos e, em seguida, podemos usar getElementByID, ou também um QuerySelector, assim como usamos anteriormente. O ID era fones de ouvido, pegue nossa ClassList, e então podemos adicionar uma nova propriedade chamada pulso. Isso está pegando a imagem do nosso fone de ouvido. Em seguida, adicionamos uma nova ClassList de pulso, que agora podemos usar em nossas folhas de estilo. Na parte inferior, o nome da animação, que vai ser chamado de pulso; eu vou criar isso em apenas um segundo. Em seguida, a duração desta animação vai ser superior a 0,4 segundos. Para isso funcionar, também precisamos criar nossos quadros-chave, ou seja, animação de pulso. Nós usamos a seção de, e isso é para o início de nossa animação. Tudo o que vamos fazer aqui dentro é definir a transformação e a propriedade scale, para ser um valor de um. Para começar, isso vai ser exatamente o mesmo tamanho que era originalmente, meio caminho, que vai ser de 50 por cento. Em seguida, definiremos a transformação como um valor de escala de 0,9. Para terminar nossa transição, vamos definir o valor para, e isso vai transformar nossa escala de volta ao nosso valor original de um. Esta é apenas uma mudança sutil. Vamos passar do tamanho original para 90 por cento, e depois voltar para o tamanho original. Isso acontecerá ao longo de uma duração de 0,4 segundos. Dê um salvamento, e podemos tentar isso no navegador. Vamos clicar na nossa primeira música, e vemos o pulso. Mas agora, se clicarmos em qualquer outra música, não vemos a animação acontecendo. Isso ocorre porque de volta em nosso roteiro, nós adicionamos em uma aula, mas cada vez que selecionamos uma nova música, nós também precisamos remover esta sala de aula qualquer um dos elementos. Isto vai ser muito semelhante, por isso podemos copiar esta última linha, colar isto na função iniciada. Mas desta vez, em vez de adicionar a nossa turma, vamos remover. Vamos tentar isso; clique em qualquer música, nossa animação de pulso funciona. Vamos tentar o segundo, e isso funciona para cada item em que clicamos. A última coisa que vamos fazer é corrigir um problema ao selecionar nossas músicas. Isso pode, ou não, ser um problema que você descobriu ainda. Mas se clicarmos em qualquer uma de nossas músicas, isso irá então definir o texto Reproduzindo agora. No entanto, para certas partes da seção, se clicarmos logo acima da nossa lista, obtemos o conteúdo de todas as nossas músicas. Isso ocorre porque de volta em nosso JavaScript, estamos adicionando este manipulador de cliques à nossa seção completa da lista de músicas. A lista de músicas é o nosso rapper, e isto contém todos os itens da nossa lista. Tudo funciona perfeitamente bem se clicarmos nestes itens da lista. Mas se clicarmos apenas fora da lista itens como acabamos de ver, isto irá selecionar o conteúdo completo da nossa lista de músicas. Para corrigir isso, vamos reorganizar essa função para ouvir apenas quaisquer cliques em nossos itens de lista. A maneira de fazer isso é selecionando nossos documentos completos, e então podemos usar QuerySelectorAll plus em nossos elementos 'li'. Isso vai pegar todos os nossos itens da lista na página. Podemos instalar isso dentro de uma constante chamada links, e definir isso igual ao nosso valor. Este valor de links será agora nossas seis músicas. Precisamos percorrer todos esses seis valores e, em seguida, adicionar nosso ouvinte de eventos a cada um desses itens de lista. Para fazer isso, vamos fazer uso de um loop for of, e isso se parece com isso. Então dizemos para e, em seguida, criar uma constante chamada link de links. Isso vai percorrer todos os nossos seis links e, em seguida, armazenar o valor individual dentro de uma constante chamada link. Para cada link, vamos então adicionar um ouvinte de eventos, e o evento que queremos ouvir é 'click', que vai então acionar uma função chamada setSong, que significa que agora não precisamos mais fazer loop através de nossa música completa para que possamos remover isso. Agora podemos transformar nossa função em SetSong. Podemos então mover isso para baixo ao lado da nossa função. Dê um salvamento, e agora você pode experimentar isso no navegador. Clique em uma música, e ela ainda toca bem. Podemos trocar de músicas e, finalmente, se clicarmos fora de nossos itens de lista, essa função não será mais executada. Com este problema agora corrigido, este é agora o fim do nosso aplicativo de leitor de música. Obrigado por assistir, e espero que tenha gostado. 14. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, confira o resto das minhas aulas aqui no Skillshare e também me acompanhe para atualizações. Também para ser informado de quaisquer novas aulas à medida que se tornarem disponíveis. Então, obrigado mais uma vez. Boa sorte. Espero vê-lo novamente em uma aula futura.