Criando Player de Áudio com Javascript | Mayk Brito



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 thoughts on “Criando Player de Áudio com Javascript | Mayk Brito

  • February 26, 2020 at 06:06
    Permalink

    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?

  • February 26, 2020 at 06:06
    Permalink

    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

  • February 26, 2020 at 06:06
    Permalink

    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"

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

    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

  • February 26, 2020 at 06:06
    Permalink

    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.

  • February 26, 2020 at 06:06
    Permalink

    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.

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

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

  • February 26, 2020 at 06:06
    Permalink

    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

  • February 26, 2020 at 06:06
    Permalink

    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.

  • February 26, 2020 at 06:06
    Permalink

    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.

  • February 26, 2020 at 06:06
    Permalink

    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 Reply