Criando Player de Áudio com Javascript | Mayk Brito

[@evertonmaca7409]

Muito top, estou começando meus estudos em programação agora aos 40 anos e estou morrendo de medo, mas obrigado pela motivação no final. Precisava muito ouvir essas palavras. E que aula muito mas muito surpreendente.

[@thallesmanhaes3700]

"Ele vai PLEYAAA" kkkkkkkkkkk" , um dos melhores instrutores que já vi na vida, Mayk Brito simplesmente monstro!!!!

[@rocketseat]

Hahahaha 💜 Maykão é fera, né? 💜💜

[@pegandoatalho6839]

Esse time é muito TOP! Hoje trabalho com marketing digital, mas quero logo mais começar a programar e já sei bem o melhor caminho. Sou Designer mas em minhas veias corre código fonte! Vocês são muito bons! Parabéns.

[@vitorhugo9799]

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

[@brunonzx]

Caraca mano a Omnistack tá a todo vapor essa semana e o pessoal ainda consegue produzir mais conteúdo pro canal!! Esse time da Rocketseat é TOP!!!

[@angelomatheus9015]

up!

[@franciscomessiascelestinoa6280]

Passei uns 3 ou 4 dias, mas finalmente terminei. Muito obrigado, por dividirem com a comunidade conhecimentos tão importante e poderoso!!! Juntos para o próximo nível!!!

[@danielmoura5453]

Aula sensacional, tem muita coisa pra eu aprender com essa aula, eu já tinha visto o tipo objeto no Discover, mas ainda assim, a minha mente ainda não tinha entendido o que é possível fazer com o objeto, e realmente usando o objeto e separando os códigos e arquivos JS diferente deixou o código muito mais lipo e fácil de entender. 1:29:20 Era isso que eu queria fazer, eu até esqueci que existia o input do tipo range, e eu pensando que teria que fazer na mão, vou ter que ver esse vídeo falando sobre o this. Tem muita coisa desse vídeo que vou ter que ver de novo, mais uma coisa é certa, esse vídeo abriu mais ainda a minha mente, vlw Mayk por mais uma aula incrível e cheia de conteúdo novo. PS: Depois vou refatorar o meu código do desafio do Player de Música do #boraCodar utilizando tudo o que eu consegui absorver dessa aula

[@marciosouza3371]

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.

[@vincolasrj]

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"

[@danielsan6758]

o update do restart só vai ser acionado quando o legth do this.currentPlaying for igual ao this.audioData.length .

[@AlcinoMartins777]

eu também aprimorei seu projeto coloquei mais botões e inclusive da pra trocar a play list, escolher o gênero da musica você me ajudou muito obrigado

[@Eldericky]

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

[@rotinaindependente]

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

[@ruanvalente7496]

Caraca mano como sempre impecável !!! Você é fera de mais !!!! Parabéns a você e toda a equipe por todo conteúdo de qualidade que vocês fornecem. Sucesso !! Espero entrar futuramente no bootcamp !! Hahaha

[@maykbrito]

Valeu Ruan!!! Obg pelo carinho!! Vc é fera mano!! tamo junto

[@clebersonosorio1398]

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

[@VortexChannelBr]

Eu trabalho com desenvolvimento frontend e utilizo muito js, Cara esse vídeo ensino para min o com estruturar melhor os meus js... top vlw cara .

[@neow7666]

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

[@rodolfodeveloper]

O final, é o motivacional necessário para o ponta pé em uma brilhante carreira

[@jcrdiscipulo]

Mayk Deus te deu um dom de ensino Efésios 4:11. Cara fica muito simples. É um conteúdo muito bom

[@JonathanDev88]

Esse vídeo foi muito esclarecedor pra meu projeto

[@antoniomartins9917]

Ensina como criar player de video que nem o do starter dos cursos da rocketseat!

[@maykbrito]

Excelente sugestão

[@rodrigodiasnoronha9154]

Excelente. Seria um sonho um vídeo desse. Criando um player de vídeo personalizado.

[@spartaktecnologia5350]

Vamo encher de like

[@fabiobaziota5919]

Eu recriei um mano dê uma olhada github.com/BaziotaBeans/video_playlist_player

[@universonomade10x]

@@fabiobaziota5919 Nossa, ficou show esse seu player - Amei - Está funcionando perfeito aqui. Adaptei ele com php / mysqli

[@polakorafa]

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

[@BRUNOMTR]

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

[@dvnnunes]

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.

[@viniciusrosa3114]

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

[@calilvaz2740]

Mayk Brito o brabo !!!

[@luanmateus9897]

Por favor faz mais vídeo assim de javascript!

[@maykbrito]

Obrigado pelo feedback brother!! =D Que bom que curtiu

[@GustavoNeitzke]

Aula sensacional! Parabéns ;)

[@rocketseat]

Valeeeu demais, Gu! 💜 😍

[@tadeubarbosa1762]

Ótima aula! 👏👏

[@felipeoliveira5191]

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

[@ZePelimGames]

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

[@cedrio1027]

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"

[@gabriellima6744]

Parabéns pelo vídeo, me ajudou demais!! Só fazendo uma observação, percebi que o player não guarda as informações de altura do volume e se está mudo ou não quando mudamos de áudio ou damos f5 na página. Então, se por exemplo o mute é ativado e o áudio termina, o próximo áudio se inicia com som mesmo que o ícone de volume mostre que o mute está ativado (volume deveria estar zerado). Resolvi esse problema acrescentando as seguintes linhas no actions(){} : this.setVolume(this.volume.value); this.audio.muted = (this.mute.innerText == "volume_down")? true : false ;

[@dancasttro]

Ótimo video. Por favor façam mais videos assim

[@extremoleste8310]

Caraca 😲 mó aulão de HTML, CSS, e JS

[@jose126636]

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?

[@AtilaDelcanton]

Muito foda... show de bola

[@edsonferraz1]

10 sua aula, parabéns!! Vc sabe como detectar os picos do audio e atribuir a uma variável?

[@luizrodrigo3929]

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

[@mateusmenezes6177]

Mayk Brito é foda

[@luau01]

Muito bom !!! Parabéns !!

[@guilhermemaciel4265]

top! esse cara explica 10.

[@luiztiquejr2294]

@Mayk Brito gostaria de implementar um player dinâmico com mais de uma playlist como por exemplo o Spotify, pode dar dicas de como fazer?

[@iagoth923]

tambem queria saber..

[@canaldotiodavid]

Professor, até 21:33 fiz os mesmos passos, porém, a minha imagem não carregou de jeito nenhum, já utilizei outras mídias e não está dando certo. Tem ideia do que poderia ser?

[@rafaelzolondek4739]

Conseguiu fazer mano, aqui deu a mesma coisa

[@rafaelzolondek4739]

?

[@diieggo2]

Faz de vídeo por favor! Muito bom!

[@dustnoiseplays]

Muito maneiro!

[@luisfelipetv3459]

Muito top!!!!!!!!!

[@MarcosVinicius-zh7yz]

Boa mano, ótimo vídeo!!! Fiquei curioso com uma coisa, se você puder me ajudar, qual distro Linux você usa?

[@Leonardo-ux3fg]

Também gostaria de saber, igual um Mac!!!

[@josealisson3718]

@@Leonardo-ux3fg Deepin linux

[@AlcinoMartins777]

meu amigo muito bom

[@principe.borodin]

Rapaz, que aula!

[@leonnardobr21]

Gostei muito, que dificuldade eu teria em torná-lo em desktop com o Electron?

[@cuchas8055]

SENSACIONAAAL

[@Leonardo-ux3fg]

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

[@luisfelipetv3459]

Demorei para aprender essa estrutura, mas agora está bem mais claro o JavaScript, vou usar para criar outros mecanismo como timer, slider.. O que desenvolvi com base no video: github.com/Luis-Felipe-N/vacations vacations-luis.netlify.app/

[@samueloliveira4465]

Existe alguma API para fazer integração? Quero colocar para tocar músicas dentro de uma aplicação que estou fazendo

[@CarlosYounes]

Muito Legal Parabéns! Gostaria muito de saber como liberar o arquivo de audio para o visitante do site ouvir a música mas não conseguir fazer download. no mac não aparece o menu de "3 pontinhos", mas no chrome e em outros browsers fica disponível no player básico do browser. Se souber gostaria de uma solução de segurança ao nível do provedor. Já tentei mudar as permissões de pasta no host mas não consegui o resultado: "Toca a música mas boqueia os downloads" Muito grato Abraços e sucesso! :)

[@paulo_alchemist9766]

Aula muito boa! O player ficou massa. Só uma coisa no Chrome me deixou intrigado. O ponto do seekbar só quer se mover para o min=0. Não atualiza com até o max. Isso só está ocorrendo no Chrome. No Firefox roda tudo igual a aula. Isso aconteceu com mais alguém aqui? Se conseguiram resolver, podem compartilhar?

[@railanbernardo]

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

[@marceloneri1]

Show!

[@RenanArizaSalmazio2034]

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.

[@brunohs3413]

É a Color Highlight

[@RenanArizaSalmazio2034]

@@brunohs3413 obrigado.

[@extremoleste8310]

Eu fiz passo a passo, mas de maneira diferente e deu certinho 😂😂

[@edu.almmeeida]

Estou com problema na quantidade de itens dentro da window.audios = [ ...], tem uns 10 arquivos e ele toca apenas os 4 primeiros. Como posso fazer para tocar todos?

[@rafahzacche]

muito bom.

[@danielmoura5453]

1:31:01 Eu fiz isso no desfio do #boraCodar e deu esse erro, as vezes eu atualizava a pagina e aparecia e outra não, só foi funcionar corretamente depois que eu usei o window.onload, agora eu não sabia que dava pra fazer desse jeito também: 1:31:30

[@ricardolucas4517]

Boa noite, qual requisito preciso ter para continuar o curso

[@andersonreis2570]

Show... Gostaria de fazer um play para tocar uma web rádio nesse estilo como eu colocaria a "Streaming"?

[@iagoth923]

tambem queria saber isso..

[@jonathasribeiro6862]

Tomei Spoiler ontem vendo o Github da Rocket hahahah

[@maykbrito]

hahahahahah

[@messijurere189]

Opa. Mayk, por quanto vc vende esse código?

[@Jorgelgf]

Estou pensando em criar um simulador de bateria (musical), tipo tocar em loops, essa aplicação me dá um norte pra eu poder desenvolver isso?

[@programacaocomcerveja4736]

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

[@pcatubaaula4136]

faz tipo um sitema que baixa(faz download ) de videos ou musicas

[@juan70433]

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. passou esse erro, indica erro na linha

[@4060607]

ensina como enviar o audio via blob e como "proteger" os arquivos.

[@marciomrb]

da pra usar com electron?

[@daferrub]

Ola amigo! Você pode me ajudar a colocar um link para minha transmissão de rádio ao vivo no hard player? Nos usamos shoutcast para transmitir.

[@rocketseat]

Faala, Dario! Você conhece nossa comunidade aberta? Por lá você pode tirar essa e outras dúvidas que tiver 💜💜 Segue o link: www.rocketseat.com.br/comunidade

[@earthoff]

Alguém tem os arquivos do repositório? Não consegui encontrar aqui.

[@iua9955]

alguem sabe pq o link do place holder nao funfa?

[@joelberthsena]

Vocês são f0d%

[@rafaelzolondek4739]

Aqui não deu certo de manipular as DOMs com JS

[@mateusrocha7634]

Mano, 100 palavras

[@brunosousa3113]

Oi, alguém passou por esse erro net::ERR_FAILED ? Ele indica erro justamente na linha

[@brunosousa3113]

Encontrei uma solução no seguinte link: stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode

[@bmrocha7l]

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

[@monkeeymusic6646]

57:18

[@maguininhos]

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

[@MichaelClowCamus]

terminei no segundo dia (com vários gritos internos) mais terminei :]

[@rocketseat]

Boooooa, Michael! Parabéns! 💜 🚀

[@maguininhos]

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

[@Stiiv]

Uai cadê o resto com moderado e hard

[@pablopolito1143]

Ok me arrependi kkkkkkkkkkkkkk

[@extremoleste8310]

Indo pro nível Hardcore 😂😂