Projetos Javascript #02 - PARTE 2 Criando um player de música

[@ricardosilvaalves6168]

cara, parabéns, você é novo e já é um prodígio pelo simples fato de você explicar detalhe por detalhe.

[@viniciuslima9814]

Sua aula é incrível cara! procurei bastante o conteúdo para criar um player, e o seu foi o melhor e bem explicativo! e eu só achei o periquito no seu ombro depois de 2 minutos de vídeo kkkk

[@_beatrizny]

Que delicinha de projeto, muitíssimo obrigada, viu!! mais um projetinho para meu github, ótimo trabalho aprendi bastante coisa

[@fabioreed]

Credo. MELHOR AULA DE JS QUE JA VI NA VIDA!

[@marcelo_nunes]

cara... você tem uma didática impecável, recomendo muito que continue fazendo vídeos, é um professor nato.

[@esthersilva6952]

tooop irmao, eu esta imagindo um loop de repeticão para passar as musicas, usando tambem o decrementar os objetos da arrays. Mas muuitoo boom

[@MateusSantos-do4it]

Estou vendo o vídeo que você recomendou do Rocketseat, achei bem organizado e também gostei da forma que ele montou os controles da música. Porém, a forma que você montou o seu código ficou MIlllllll vezes mais tranquilo de entender e raciocinar. Sua didática e seu raciocínio está impecável! Parabéns!!

[@kamelow8399]

Ola Mateus! Entrei no canal Rocketseat, mas nao encontrei o video mencionado - o mesmo que voce diz acima que viu! Voce poderia deixar. o link aqui?

[@dark_light_3987]

@@kamelow8399 kzbin.info/www/bejne/rKLVm3mkpphgq9E ai o link, apesar que acho q você já achou s2

[@douglasfigueiredo3700]

para quem esta com o problema de NAN : NAN no tempo da musica : let duracaoMusica = document.querySelector('.fim'); function duration(){ duracaoMusica.textContent = segundosParaMinutos(Math.floor(currentSong.duration)); }

[@igormoraes6838]

aqui ainda está dando erro :c

[@maxzampieri6846]

Aqui não ta dando tbem

[@RafaelSilva-oh4yv]

@@igormoraes6838 precisa criara um evento musica.addEventListener('loadeddata', duration); function duration(){ let duracaoMusica = document.querySelector('.fim'); duracaoMusica.textContent = segundosParaMinutos(Math.floor(currentSong.duration)); } e coloca o valor 0:00 na class="fim" do index.html

[@RafaelSilva-oh4yv]

@@maxzampieri6846 vê a minha resposta do comentário do @WQPOKDQW

[@hernaneamaral447]

@@RafaelSilva-oh4yv Nas aspas (Math.floor(currentSong.duration)); } CurrentSong.duration está INCORRETO! script CORRETA é (music.duration) o resto tá certo. Obrigado Rafael por me tirar essa dúvida tava surtando! Kkkkkk

[@MarcosOliveira_dev]

Gostei, ficou muito bom. Parabéns

[@beniltosantos7720]

cara sua didatica de ensino me convenceu a me escrever em sue canal parabens pela clareza nas suas explicaçoes

[@leoaarruda]

Eu no caso de fazer o tratamento do erro, colocaria como atributo o index.length, com isso, independente do seu do Array, não iria quebrar nem precisar ajustar os ifs.

[@josefabio8114]

melhor aula sobre esse assunto parabéns

[@alexpantoja610]

ótimo video, so não conseguir colocar o tempo total da música, sempre da NaN. Só quando eu coloco dentro da função de Play, ai da certo

[@jonashors]

Inscrito e like dado...mais que merecido...virei teu fã

[@ostara5481]

Obg irmão, ótima didática e qualidade de vídeo, tudo de bom pra ti e sucesso na sua carreira!!

[@saulozonta431]

Muito boa a sua explicação cara... sou iniciante em programação e principalmente em linguagem de programação, mas sua explicação conseguiu fazer sentido de vdd. Obrigado por esse projetinho bem legal, só gostaria de ter conhecimento para adicionar umas coisinhas como conseguiu voltar a musica da onde eu desejar e quando passar de musica já começar automaticamente.

[@kamelow8399]

Ta contratado!!!

[@mrtintii]

que brisa a gente tem o mesmo sobrenome k.. muito bom o vídeo, explica mt bem

[@rangel_r0cha]

Projeto muito bom, parabéns! Aprendi bastante.

[@estherpessoa544]

Muito topp!! Esse pelo menos nao tera propaganda chata kkkkk

[@lordbizuca]

Parabens man! Conheci hj o seu canal e já sou fã! Obrigado por ajudar todos nós nessa aventura do aprendizado.

[@walney2008]

muito obrigado espero muitos videos como esse, para mim que estou iniciando estou adorando, ^^, quero criar um piano infantil, jogo caça-palavras e um bingo, ^^

[@igorramos8024]

Ficou com um bugzinho ao mudar a musica enquanto toca mas é só chamar a função pausarMusica dentro da função renderizarMusica. 😉

[@youngdll7]

deu esse mesmo bug, usei um music.play() e deu certo !! kkk

[@extremoleste8310]

​@@youngdll7 valeu cara deu certinho 😂😂😂😂

[@cynicalmai]

moço, como faz isso??

[@gustavocarvalhodasilva8426]

manooo, vídeo mt foda. Parabéns

[@joao-tinti]

Valeuu Gustavo!!

[@IsaqueBarbosa_21]

Muito obrigado amigo projeto top , com certeza agregará muito a meus conhecimentos

[@cellyoliveira4229]

Parabéns pela didática. Consegui fazer certinho sem erros

[@MelquiMartins42]

Seria legal se na época que você tava gravando esse tutorial maravilhoso, usasse POO em js fica otimo

[@leoaarruda]

Exato, usar classe ao invés de Arrys, isso é bom pra ele fazer um vídeo de refatoração de código.

[@pauloguedes96]

O meu amigo muito obrigado pela aula, estou estudando e seu vídeo me ajudou muito, depois faz denovo mas com controle de volume, muito obg e abraços!

[@rafaelribas4767]

Ótimo vídeo, parabéns.

[@PortalConhecimentoOnline]

Muito obrigado João, conteúdo e ensino perfeito.

[@gabrielagato305]

Muito bom o seu canal! Parabéns 👏

[@joao-tinti]

Obrigado Gabriela!!

[@kvacekteorias5141]

o meu da dando erro na hora de trocrar pra proxima musica

[@faeserprod8720]

Pô cara parabéns de verdade pelo vídeo, muito foda mesmo, tenho uma pergunta, tem como resolver q a barra ficou indo meio travada

[@bruxoroki]

tira o math.floor

[@walney2008]

João, tudo bem ? como fazer para este let musicas = que você colocou dentro do código, ser lido de um arquivo externo json ? poderia ensinar ? para poder ter N musicas, adorei esse projeto, ^^, funciona com arquivos wav e mid também ?

[@tuftingceres]

oi muito boa suas dicas no meu nao consegui fazer a barra sobreposta

[@juliofernandes5012]

Top mano

[@romulo12silva]

valeu cara

[@vrinfinitygamehouse]

como você upa isso para internet? Para que outros dispositivos possam estar acessando esse mesmo site

[@jenni2547]

vlw muito bom

[@Procastinandu]

Como coloca pra aumentar ou diminuir o volume? e como posso fazer ele virar um player compacto que fique no topo do site fixado ?

[@DiegoRicordi]

Como faço para adicionar mais músicas ?

[@Bob_Cj_Samp]

ALGUÉM SABE ME DIZER COMO FAÇO PRA COMPARTILHAR O APP COM.OUTRAS PESSOAS MAS NA FORMA DE APLICATIVO?

[@renantibia92]

Muito bom👏🏼👏🏼👏🏼👏🏼👏🏼

[@joao-tinti]

Valeuu Renan!

[@yurilopes966]

Conteudo fodaaa, parabenss

[@fabriciogomes2960]

o meu não consigo fazer a musica tocar, e fiz tudo certinho

[@kvacekteorias5141]

no de mais alguem deu erro nesse final?

[@LindembergueSilva]

Muito bom

[@joao-tinti]

Valeuuu Lindembergue!

[@PexuPixo]

Quando passa a música executando, o pause deveria voltar a ser play ou então reproduzir automaticamente a música.

[@sephzi2443]

curti pra krl

[@joao-tinti]

Verdade Seph!

[@helenafofaponeigamer1050]

insano, muito legal, obrigado

[@RafaelSilva-oh4yv]

Muito bom!

[@gabrielpelinsari109]

Top!!!!!

[@joao-tinti]

Obrigado Gabriel!!!

[@GUSTAVOHENRIQUE-jg2bx]

exelente professor!!

[@lucaswartha]

muito obrigado, aprendi bastante :-)

[@joao-tinti]

Obrigado Lucas! Que bom!

[@PexuPixo]

​@@joao-tinti Quando passa a música executando, o pause deveria voltar a ser play ou então reproduzir automaticamente a música.

[@manoelrabelo7193]

Alguem pode me ajudar? duracaoMusica.textContent = segundosParaMinutos(Math.floor(musica.duration)); Esse comando ano esta funcionando muito bem no meu VScode eu reinicio a pagina varias vezes e as vezes retorna o tempo correto e as veses um Nan:Nan, em seguida reinicio e retorna corretamente o tempo

[@paulorenan7112]

O meu tava dando esse erro tbm, percebi que escrevi a palavra duration como durantion, tinha erro na letra N. Corrigi e funcionou.

[@lordbizuca]

veja se vc colocou renderizarMusica(indexMusica); abaixo de: document.querySelector('.anterior').addEventListener('click', () =>{ indexMusica--; e tb no: document.querySelector('.proxima').addEventListener('click', () =>{ indexMusica++;

[@andreray1795]

mano eu consegui resolver assim: coloquei esse evento: window.onload = duration; e essa é a função que vai ser executada: function duration(){ durationMusic.textContent = secondsForMinutes(Math.floor(currentSong.duration)) }

[@igormoraes6838]

@@andreray1795 VC É UM GÊNIO

[@emersonnogueira797]

@@andreray1795 deu certo, vtnc mlk, vc é brabo

[@nelson.costa.dev2536]

Cara muito massa esse conteúdo parabéns, só me diga uma coisa é possível fazer esse time com vídeo.

[@joao-tinti]

Fala Nelson! é possível também

[@jorgejr4462]

Meus parabéns pela aula man! Eu tô batendo um pouco a cabeça porque no contador final não está aparecendo a duração da música corretamente, mas aparece um NaN:NaN, mas tudo bem hehe, depois volto pra tentar de novo.

[@gamesecinema5788]

vc resolveu ?? qual foi a solucao

[@jorgejr4462]

@@gamesecinema5788 resolvi sim, no fim o erro estava na extensão do VS Code que eu usei. No meu caso, eu salvei o arquivo e abri ele diretamente do diretório, daí funcionou tranquilo

[@andreray1795]

no meu também ficou assim

[@andreray1795]

@@gamesecinema5788 mano eu consegui resolver assim: coloquei esse evento: window.onload = duration; e essa é a função que vai ser executada: function duration(){ durationMusic.textContent = secondsForMinutes(Math.floor(currentSong.duration)) }

[@gustavobasilio1647]

@@andreray1795 caramba me ajudou em valeu :D

[@kamelow8399]

Ola Joao, Bom dia! Tentei encontrar uma forma/maneira de contato direto com voce enao encontrei! Gostaria de falar. Vamos seguir em frente? Grande abraco, JM

[@joaomaccari6076]

Não consigo entender qual a vantagem de usar uma função anônima ao invés de colocar um onclick lá no html dos botões de próximo e anterior e declarar essas funções no Js. Estava fazendo um player e travei justamente na parte de passar as musicas. Fiz um projeto muito mais simples, você ajudou de mais! Obrigadoo.

[@RicardoSantos-zn1zl]

não é questão de vantagem, são só modos diferentes de se fazer. eu usava onclick no começo, hj chamos os eventos de click pois acho melhor. em alguns casos não vou poder usar onclick, então já fui treinando chamada de eventos, quando eu presisar já vou saber.

[@superbr1570]

No chrome ficou meio bugado, no tempo final da musica as vezes fica aparecendo NaN, tentei arrumar forçando que é um numero, mas msm assim as vezes ele aparece bugado de novo.

[@israelsantana7405]

Estou na mesma mano, você conseguiu arrumar?

[@superbr1570]

@@israelsantana7405 eu fiz de outro jeito e deu certo. Mas confesso que não tentei fazer esse de novo

[@HawkHacking]

@@superbr1570 Qual jeito vc fez q deu certo?

[@alessandrocabral9239]

Joao teria como eu por musica por link direto, em vez de por musica da pasta local?

[@ramosandresc]

👍

[@MarioRenanofc]

eu não consegui introduzir meu script! Ele não dá a interação com o conteúdo! Oque pode ser? Alguém com uma ajudiinha ai! Eiiii? Please!

[@jonasmorais2091]

Oi João gostei do vídeo fiz um reprodutor de mp3 com base nesse seu vídeo, para trinar e estudar programação. Só queria saber de uma coisa, eu estou começando na programação estou fazendo um curso online mesmo, você acha que é preciso fazer faculdade para se tornar um bom programador ?

[@douglasfigueiredo3700]

nao precisa amigo, experiencia vale mais do que diploma, pois a faculdde nao te ensina a programar, mas hj em dia as empresas ainde pedem graduação, mas isso nao eh requisito

[@inteligence8528]

ganhou mais um inscrito

[@bscyasmin]

Sou estudante de programação, mas ainda não iniciei o js, tentei fazer esse código pelo sublime mas não deu certo, instalei o Visual Studio code, mas não sei como instala e faz funcionar a extensão. Poderia fazer um vídeo explicando? Mas parabéns pela habilidade, quero muito chegar a esse nível um dia.

[@supper_views]

olá amigo, me ajudou muito mano! mas eu tenho uma dúvida e ficarei grato se puder responder. quando clicamos no botão de próximo ou anterior a música não começa sozinha e nem o tempo e nem o progress não atualiza automaticamente, poderia resolver isso em um vídeo?

[@DeyvsonAguiar]

Caraca, adorei hein! Me da uma dica ai... eu quis mudar o 0 e o 2 dentro do if do evento que corrigimos o índice negativo e o índice ser maior que o total de músicas, criando uma variável e usando o length mas o player da erro... por que será?

[@andreray1795]

é que o index começa com 0, ai o length é 3 mas o index da música é 2, então tem que colocar musicas.length - 1 pra funcionar

[@gsouzar]

Ola João, tudo bem? Sou iniciante no JS e vejo que em todos os seus projetos vc esta sempre lançabdo mão de uma função ou evento, para mim desconhecidos obviamente, e eu gostaria de saber onde encontro essas informações para sair do B A BA da linguagem, blz? Da essa forcinha? Obrigado.

[@fabiula_pd1999]

João você pode colocar um novo link do discord? Não sei se você sabe mas o convite que você fez não é infinito e expirou, mas eu queria entrar no server então se puder trocar por um novo agradeço :)

[@raullemossobrinho8751]

Parabéns! Ótimo vídeo... Ótimo conteúdo... Ótima didática. Só fiquei um pouquinho decepcionado com a solução proposta para garantir sucesso nos eventos click da próxima e anterior. Pelo bom nível do código deveria ali ter sido utilizado o método para verificar o tamanho total do array e as funções matemáticas Max e Min. De qualquer forma o teu esforço não foi em vão. Parabéns!

[@TheMurilocabreira]

como seria? to quebrandoa cabeça aqui , mas o length na vai , por ser obj no array, não consegui pegar o indice do elemento com nada

[@redeboanovaoficial]

Olá João Tint, muito bom tutorial parabens, só queria uma ajuda sua se possivel, a única coisa que não estar funcionando no meu é a barra não estar deslisando e não estar contando o tempo da musica mas não sei o que fazer, já peguei até o modelo no guit hub mas tudo funciona menos a barra e os minutos da musica, Talvez voce ou alguem nos comentarios ai poderiam me ajudar por favor, só falta isso para ficar 100%. grato

[@gustavohemckmeier5615]

aconteceu aqui também

[@ilanbarrosveras4904]

6:38

[@liliadetassia4153]

Tive um problema no código, na parte de transformar segundos em minutos não deu certo, ja olhei diversas vezes se tinha algum erro mas não encontrei.

[@andreray1795]

mano eu consegui resolver assim: coloquei esse evento: window.onload = duration; e essa é a função que vai ser executada: function duration(){ durationMusic.textContent = secondsForMinutes(Math.floor(currentSong.duration)) }

[@lia9970]

@@andreray1795 Gratidão ❤️

[@douglasfigueiredo3700]

@@andreray1795 brabo, vlw man

[@VictorHugo-ty9cu]

o script pra contar a duração da musica não funciona so fica NaN:NaN, o que eu faço ?

[@andreray1795]

mano eu consegui resolver assim: coloquei esse evento: window.onload = duration; e essa é a função que vai ser executada: function duration(){ durationMusic.textContent = secondsForMinutes(Math.floor(currentSong.duration)) }

[@glaudsonnunes9589]

mano tava quebrando cabeça com meu codigo, sendo que ele estava totalmente correto, um pouco diferente do seu mas funcionando perfeitamente, ai acabei descobrindo que oque tava dando erro era a musica que eu tinha baixado, baixe outra e o erro sumiu

[@wyrdear6355]

Chará, coloca o link do discord, está dando como expirado.

[@Luis-Felipe1999]

Mano, meu código ta correto, porém, da um erro de NaN na duração em minutos. Como resolvo?

[@andreray1795]

mano eu consegui resolver assim: coloquei esse evento: window.onload = duration; e essa é a função que vai ser executada: function duration(){ durationMusic.textContent = secondsForMinutes(Math.floor(currentSong.duration)) }

[@theus_santos]

30:00

[@diegofagundes-es2mb]

Eu fiquei 2 horas procurando um bug quando eu fui ver eu tinha nomeado a pasta como musica e nao como musicas e um errinho ja deu bug em tudo kkkkkkkkk

[@god9188]

q triste o meu n tocou musica e eu tenho certeza que ta tudo certo

[@fabiomorais5495]

pode ser o caminho que tá errado..

[@joao-tinti]

Fala Douglas, qual o erro que aparece?

[@beniltosantos7720]

quem dera que pudesse da like duas vezez kkkkkk fica tranquilo que so dei like uma vez mesmo ou entao darei like em impar

[@Bob_Cj_Samp]

EU FIZ A MESMA COISA QUE VOCE FEZ E QUANDO FUI PASSAR DE MÚSICA NAO DEU

[@Bob_Cj_Samp]

EU JA VIH E REVIH O CÓDIGOS

[@Bob_Cj_Samp]

Fiz tudo pelo celular

[@Bob_Cj_Samp]

Consegui arrumar

[@Brenogss]

Muito bom cara,só me explica de onde está vindo os segundos na função segundosParaMinutos.

[@erickyan8884]

os segundos é o argumento que vc ta passando ali, quando criamos uma função e passamos um argumento, por exemplo function segundosParaMinutos(segundos){ }, só estamos mostrando o caminho e a posição dele, por exemplo, poderiamos de fazer o codigo assim function formatarTempo(){ let campoMinutos = Math.floor(musica.currentTime / 60); let campoSegundos = musica.currentTime % 60; if (campoSegundos < 10){ campoSegundos = '0' + campoSegundos; } return campoMinutos+':'+campoSegundos; } de vez de fazer assim: function formatarTempo(segundos){ let campoMinutos = Math.floor(segundos / 60); let campoSegundos = segundos % 60; if (campoSegundos < 10){ campoSegundos = '0' + campoSegundos; } return campoMinutos+':'+campoSegundos; } iriá funcionar da mesma forma, lembrando que teriamos que executar aquela função acima, mas como iriamos fazer o tempo total, que iria utilizar a mesma base de calculos, de vez de fazer duas funções, utilizarmos os argumentos, para simplesmente passarmos o caminho daquele argumento, ou seja, quando nós for executar a função e dentro dos parenteses colocarmos (math.floor(musica.currentTime)) estamos dizendo que esse valor, sera atribuido no lugar dos segundos.

[@Adestudos]

[@hernaneamaral447]

Cara eu travei script tempo no "time final da música" está dando resultado NaN:NaN enquanto time musical percorre normalmente! O que deve ser problema não consigo resolver? 🤦🏽🥲