• Thursday , 9 April 2020

Criando Player de Áudio com Javascript | Mayk Brito

Code Canyon



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

3d Ocean

Related Posts

35 Comments

  1. Mateus Rocha
    February 26, 2020 at 06:06

    Mano, 100 palavras

  2. Fabiana Farias
    February 26, 2020 at 06:06

    Muito bom! Você explica muito bem! Aprendi muito. Vou procurar a aula de This que você tanto mencionou.

  3. Unknown user
    February 26, 2020 at 06:06

    Sua didática é fora do normal🖤 conteúdo bom demais

  4. Jose Pinto
    February 26, 2020 at 06:06

    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?

  5. Railan Bernardo
    February 26, 2020 at 06:06

    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

  6. Cedrio
    February 26, 2020 at 06:06

    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"

  7. Leonardo
    February 26, 2020 at 06:06

    Como tu faz pra deixar o linux igual um Mac? Qual tema usa? Obrigado e parabéns pelo ótimo trabalho!

  8. polakorafa
    February 26, 2020 at 06:06

    Show de bola. Aprendi muito ES6 nessa aula. Obrigado.

  9. Fernando Constant
    February 26, 2020 at 06:06

    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

  10. Fernando Constant
    February 26, 2020 at 06:06

    A partir de agora decidi que não assisto mais os vídeos da Naty. Eu os estudo rs.

    Rumo a desfudencia

  11. Marcio Souza
    February 26, 2020 at 06:06

    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.

  12. Renan Salmazio
    February 26, 2020 at 06:06

    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.

  13. Cleberson Osorio
    February 26, 2020 at 06:06

    @Mayk Brito Seus video são fantásticos, não e cansativo.

  14. Vitor Hugo
    February 26, 2020 at 06:06

    Acho que nunca vi um canal melhor do que esse sobre JavaScript e frameworks relacionados ao JS, muito foda!

  15. Daniel Simão
    February 26, 2020 at 06:06

    Mayk Brito, um elogio, sua didática é muito boa e seu conhecimento técnico é acima das expectativas, obrigado por compartilhar! #teamo kkkkkkkkkk

  16. Luau01
    February 26, 2020 at 06:06

    Muito bom !!! Parabéns !!

  17. Erick
    February 26, 2020 at 06:06

    Caramba mano parabéns pela aula. Você explica MUITO bem! Muito obrigado por esse conteúdo maravilhoso!

  18. Grimpop
    February 26, 2020 at 06:06

    Só uma pergunta qual Distro Linux você usa?

  19. Luiz Rodrigo
    February 26, 2020 at 06:06

    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!!!

  20. NCS BEAT
    February 26, 2020 at 06:06

    57:18

  21. Bruno Fernandes
    February 26, 2020 at 06:06

    Mayk, tenho duas sugestões de conteúdo: Implementanto a API do Google Maps num website e API do YouTube. Ajudaria bastante!! Likee.

  22. Felipe Oliveira
    February 26, 2020 at 06:06

    Que aula F#$@ O/, Aprendizado++, valeu Mayk !

  23. Joelberth Sena
    February 26, 2020 at 06:06

    Vocês são f0d%

  24. Vini Rosa
    February 26, 2020 at 06:06

    mano, gosto mt da didática desse mayk brito ae pqp

  25. Bruno Sousa
    February 26, 2020 at 06:06

    Oi, alguém passou por esse erro net::ERR_FAILED ? Ele indica erro justamente na linha
    <script src="index.js" type="module"></script>

  26. dieg0ap
    February 26, 2020 at 06:06

    Caramba!! Que explicação foda! Parabéns Mayk, continue fazendo esse tipo de conteúdo por favor =D

  27. Tadeu Barbosa
    February 26, 2020 at 06:06

    Ótima aula! 👏👏

  28. Bruno Martins Rocha
    February 26, 2020 at 06:06

    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

  29. Biofilho
    February 26, 2020 at 06:06

    Boa demaisss! Maykão, faz um vídeo pra nós de como fazer um parallax bem feito hehehe

  30. Helber Souza L
    February 26, 2020 at 06:06

    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.

  31. Igor Carvalho de Paula
    February 26, 2020 at 06:06

    Rapaz, que aula!

  32. David Nunes
    February 26, 2020 at 06:06

    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.

  33. Programação com cerveja
    February 26, 2020 at 06:06

    Boa tarde Dev, qual essa fonte aí que vc usa em seu vscode?

  34. Mizael Tobias dos Santos Nazareno
    February 26, 2020 at 06:06

    Tem como fazer um para selecionar varias musicas tipo uma playlist, passando as músicas ou escolhendo outras músicas? Excelente material parabéns.

  35. Vinícius Silva
    February 26, 2020 at 06:06

    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"

Leave A Comment

You must be logged in to post a comment.