Fala Dev! Beleza??
No vídeo de hoje vamos aprender a usar a tag audio do html5, criando um player de áudio, simulando um podcast player, com JavaScript puro e utilizando materialize como framework css.
Aprenderemos como manipular a dom e funcionalidades básicas de um player de áudio.
Vai ser uma experiência incrível!
Bora codar!
Repositório: https://github.com/Rocketseat/youtube-html-js-audio-player
—–
Acompanhe a Rocketseat nas redes sociais:
Site: https://www.rocketseat.com.br
Twitter: https://www.twitter.com/rocketseat
Facebook: https://www.facebook.com/rocketseat
Instagram: https://www.instagram.com/rocketseat_oficial
Comunidade: http://comunidade.rocketseat.com.br
Blog: https://rocketseat.com.br/blog
Original source
35 responses to “Criando Player de Áudio com Javascript | Mayk Brito”
Mano, 100 palavras
Muito bom! Você explica muito bem! Aprendi muito. Vou procurar a aula de This que você tanto mencionou.
Sua didática é fora do normal🖤 conteúdo bom demais
Obrigado pelo seu conteudo é muito bom! Más tenho umas questões? Se puder me ajudar agradeceria tanto… Como organizar os dados json vindo de Banco de dados (MySQL, PHP) de forma a ter uma estrutura igual ao seu como "title, song, type… etc"? Outra é possivel ter o audio player tocando no background sem interferença de nenhum refresh page, nesse caso ao trocar de pagina nao pode parar a musica?
Opa Mayk Brito blz cara eu sou iniciante ainda com javascript e eu tou querendo fazer um menu que quando você clica no link ele fica ativo com uma cor diferente você pode me ajudar a fazer isso fico muinto agradecido
um video sobre como procurar emprego sendo junior seria uma boa em e quando saber se vc já é apto pra tentar uma vaga de pleno, to procurando vaga junior e ta impossivel as vagas de junior assustam muito com o que pedem, pedem ate typescript e ta pedindo mesmo não é "seria bom se voce soubesse"
Como tu faz pra deixar o linux igual um Mac? Qual tema usa? Obrigado e parabéns pelo ótimo trabalho!
Show de bola. Aprendi muito ES6 nessa aula. Obrigado.
Mas confesso que tenho muita dificuldade em entender como se chega aos valores de o que é o que
Como definir valores para transporte?
Como definir valores para independência financeira…
#socorro
A partir de agora decidi que não assisto mais os vídeos da Naty. Eu os estudo rs.
Rumo a desfudencia
Muito bom! Valeu por essa aula. Eu como trabalho muito durante a semana, fui fazendo um pouco cada dia. Finalizei hoje. Foi ótimo pra treinar vários conceitos e me manter codando todo o dia um pouquinho.
Desculpe a pergunta um pouco fora do contexto.
Qual a extensão do VSCode que está sendo utilizada para pintar o background quando seleciona a cor no css?
obrigado.
@Mayk Brito Seus video são fantásticos, não e cansativo.
Acho que nunca vi um canal melhor do que esse sobre JavaScript e frameworks relacionados ao JS, muito foda!
Mayk Brito, um elogio, sua didática é muito boa e seu conhecimento técnico é acima das expectativas, obrigado por compartilhar! #teamo kkkkkkkkkk
Muito bom !!! Parabéns !!
Caramba mano parabéns pela aula. Você explica MUITO bem! Muito obrigado por esse conteúdo maravilhoso!
Só uma pergunta qual Distro Linux você usa?
Descobri coisa novas: no box-shadow, por exemplo, eu sempre uso deslocamento X, Y e Espalhamento… Esse outro aí eu não sabia que tinha não kkkkk… Outra coisa que eu nunca faço é colocar display flex no body… Será que é por isso que eu tenho dificuldade na hora de centralizar os meu objetos??? Vou usar muita coisa que eu vi aqui neste vídeos nos meus códigos a partir de agora. Muito obrigado pelas dicas!!!
57:18
Mayk, tenho duas sugestões de conteúdo: Implementanto a API do Google Maps num website e API do YouTube. Ajudaria bastante!! Likee.
Que aula F#$@ O/, Aprendizado++, valeu Mayk !
Vocês são f0d%
mano, gosto mt da didática desse mayk brito ae pqp
Oi, alguém passou por esse erro net::ERR_FAILED ? Ele indica erro justamente na linha
<script src="index.js" type="module"></script>
Caramba!! Que explicação foda! Parabéns Mayk, continue fazendo esse tipo de conteúdo por favor =D
Ótima aula! 👏👏
Olá gostaria muito saber como criar app para ambulância igual uber só que ambulância a pessoa solicita cadastra num formulário quem tiver disponível e estiver com todos requisitos combina o transporte e inicia a corrida até pessoa e da pessoa até local indicado pela pessoa trabalho ambulância BR040 e fora plantão faço transportes gostaria muito de ter uma função assim profissional e tenho conhecimentos programação e setor ti
Boa demaisss! Maykão, faz um vídeo pra nós de como fazer um parallax bem feito hehehe
Ta ótima essa aula , porem o player de áudio ficaria bem melhor se tivesse a opção de '"próximo áudio e áudio anterior". Na minha humilde opinião , ai ficaria perfeito esse player de áudio.
Rapaz, que aula!
Show. Muito diferente do Java que estudei em 2003 ou 2005… Nem lembro mais…. Estava com problema no note. Mas já estou resolvendo para instalar o material e acompanhar. Obr.
Boa tarde Dev, qual essa fonte aí que vc usa em seu vscode?
Tem como fazer um para selecionar varias musicas tipo uma playlist, passando as músicas ou escolhendo outras músicas? Excelente material parabéns.
Muito bom!! Para ficar show faltou corrigir 2 coisas:
1. o update() que ficou sendo chamado 2x dentro no metodo next(); colocar um "return" dentro do if para encerrar a execução.
2. O ícone de mute é "volume_mute" e não "volume_down"