No video
Como criar um Piano completo com HTML, CSS e JavaScript
Рет қаралды 13,047
Жыл бұрынNesse vídeo você vai aprender a criar um Piano completo apenas usando html, css e javascript!
Vamos criar funções para tocar nosso piano com o mouse e também vamos mapear teclas do teclado para que também seja possível tocar com o teclado do seu computador!
Além disso você vai aprender técnicas beeem legais no JavaScript e no CSS!
Espero que gostem! :D
Repositório do projeto:
github.com/man...
Veja também:
- Como criar um relógio com JavaScript: • Como criar um relógio ...
- Aprenda HTML semântico na prática: • Escreva HTML como um p...
Já viu nosso projeto FullStack?
• Como criar uma API com...
Veja como criar um jogo da memória com JavaScript:
• Jogo da memoria com Ja...
#html #css #javascript
@ManualdoDev Жыл бұрын
Repositório do projeto no GItHub: github.com/manualdodev/piano
@funkypiratacat246 Жыл бұрын
O cara manja, lançou até um luiz gonzaga ehehehe
@ManualdoDev Жыл бұрын
kkkkkkkk
@devil2316 Жыл бұрын
Trás um tutorial explicando as Divs e as Class, e se possível alguns macetes que ajudam na hora ❤️
@zolkmusic Жыл бұрын
Que canal sensacionaaaaaaaaaaaaaaal cara!!!! Unindo programação e música, melhor impossível
@ManualdoDev Жыл бұрын
Valeu demais, Zolk! Tamo junto! :D
@iarlensantos3588 Жыл бұрын
Projeto incrível! Cada vez me surpreendo mais com o poder do html, css e js.
@tiagomh1264 Жыл бұрын
O cara tá voando na frequência :) aí sim
@ManualdoDev Жыл бұрын
hehehehh
@telascapow Жыл бұрын
Irado, irmão! Tua didática é sensacional. Brigadão por compartilhar teu conhecimento com a gente. Isso ajuda de mais!
@darkmusic879 Ай бұрын
muito bom, vou tentar fazer a minha versão, consegui fazer uma urna-eletrônica, e acho que consigo fazer um teclado também
@itsmatsouza Жыл бұрын
Parabéns por mais esse projeto irmão, muito top! Você ajuda muito a comunidade! Tmj
@ManualdoDev Жыл бұрын
Tamo junto, Mateus!
Жыл бұрын
Top das galáxias 🎉🎉🎉
@jhonatanoliveira4183 Жыл бұрын
sensacional!!! Que vídeo, meu amigo, que vídeo! Muito obrigado por todo conhecimento que passou através desse tutorial!!!
@hstecnologia Жыл бұрын
Cê Loko o cara faz tao bem e explica tao bem que parece fácil rsrs
@nicpeters3306 8 ай бұрын
Muito obrigado mano! De coração mesmo! Gracias por todo conhecimento compartilhado conosco
@MrCaramos Жыл бұрын
O cara é mestre num é a toa, top demais!!!
@ManualdoDev Жыл бұрын
Tamo junto, César! Valeu :D
@misaelsapiente4124 6 ай бұрын
Que aula maravilhosa!! parabéns
@faba00r0chjr7 Жыл бұрын
muito fã dos conteúdos daqui, valeu mesmo, sigo aprendendo com o canal !!!
@bothiagodev Жыл бұрын
Você é fera, obrigado por compartilhar seu conhecimento, nos ajuda d+++
@misterd1581 Жыл бұрын
Teu canal é uma maravilha, estou aprendendo muito!
@glendasantossilva3408 Жыл бұрын
Parabéns pelo projeto! Didática sensacional, muito bom mesmo.
@ManualdoDev Жыл бұрын
Valeu demais, Glenda!
@guerosoometv Жыл бұрын
ta Sensacional esse projeto e video ... Esperando videos de react hehe
@ManualdoDev Жыл бұрын
O próximo é React, em! Heheheh Valeu demais! Tamo junto!
@joaopaulosampaio5357 Жыл бұрын
Ficou incrivel esse projeto! Parabéns
@lucianobatista537 Жыл бұрын
Ótimo video mano, to querendo entrar pra programação, por isso virei fã do seu canal, vc faz tudo parece mais simples do que realmente é rsrsrs.
@ManualdoDev Жыл бұрын
Valeu demais, Luciano! Tamo junto :D
@nicpeters3306 8 ай бұрын
Na função de fazer a música rodar, a que usa na função de mousedown, coloquei antes de dar play: if(switcher.className.includes ("switcher_actv)obs: função de mudar opacity dos teclados pra 1 e jogar a bolinha do span do controle pra frente, mp3.play()... Ai é legal porque se não ligar o teclado o som não sai,fica interessante.
@esthersilva6952 11 ай бұрын
mds cara te amooooo
@jeanalves197 Жыл бұрын
Incrivel! 🥹❤👨🏻💻🎶
@hstecnologia Жыл бұрын
Mano vc é fera mano parabéns
@brunodossantospereira7519 Жыл бұрын
Parabéns mano.
@Itz_IslahAlves Жыл бұрын
opa, cheguei, já to animada pra codar :)
@ManualdoDev Жыл бұрын
aí sim!!!
@marcelobc2230 Жыл бұрын
Mandou hein.....😄 , muito bom!
@ManualdoDev Жыл бұрын
Valeu, Marcelo! Tamo junto!
@raycksantos3178 Жыл бұрын
Consegue fazer um tutorial de como usar o soundfont-player api? pra criar um reprodutor midi?
@Phzin_io Жыл бұрын
Foda pá cacete parabéns
@kashgar0fc Жыл бұрын
Mais uma aula foda
@gabrielcavani Жыл бұрын
Onde encontrou esse banco de áudios? Queria tentar fazer outro instrumento. Muito bom o vídeo!!!!!
@Edits_nick Жыл бұрын
Tem como colocar o sistema de MID pra conectar com outro teclado no Javascript?
@gabriel.smaniotto Жыл бұрын
na próxima traz um projeto com react !!!
@ViniciusEspindula Жыл бұрын
A musica não esta reproduzindo no meu piano :/
@chabetiico Жыл бұрын
Vou contratar tu pra tocar no meu casamento cara, parece o Beethoven
@ManualdoDev Жыл бұрын
kkkkkkk
@daniokras0808 Жыл бұрын
Bom dia. Alguém poderia me ajudar?? Por que quando eu passo o local dos audios, com dois pontos, como está no 45:28 do video, ele não aceita, e se eu tirar um ponto, aceita?? Sabem o motivo disso?? ( a estrutura das pastas está exatamente igual ao que foi mostrado no video)
@N0TZ3R0 Жыл бұрын
Muito bom, valeu :)
@NatanaelGamer-wd7gb 8 ай бұрын
os áudios são legais
@Histdesuspense4 8 ай бұрын
Onde que consegue os arquivos das notas do piano?
@eki3682 Ай бұрын
TAB
@LennWeltmeister Жыл бұрын
Eu tinha criado uns meses atrás um mini sintetizador, só que nunca terminei kkk
@user-ct9mt7jf7q 8 ай бұрын
fiz tudo, porem o audio nao funciona, achei que eu tinha errado alguma coisa no meu codigo e baixei o seu codigo, tbm nao funcionou o audio
@sandrinhogame2575 2 ай бұрын
Conseguiu resolver?
@vitu3566 Жыл бұрын
brabo dms
@vitu3566 Жыл бұрын
mano, percebi que na classe das teclas brancas estava como "key white" e voce no css colocou somente .white e funcionou, pq?
@ManualdoDev Жыл бұрын
Quando a gente coloca na classe por exemplo "key white" significa que estamos colocando duas classes diferentes. Então eu posso trabalhar tanto com a classe key quanto com a classe white separadamente.
@AugustoRozza Жыл бұрын
Faz um conteúdo tipo, HTML e CSS em 1h, explicando de forma rápida e eficiente para iniciantes, seria de extrema ajuda, estou voltando a estudar e desisti do curso que paguei 1k da alura, didática deles é péssima.
@rize1812 Жыл бұрын
porque não sai som?
@Canal_Marte Жыл бұрын
Pq o projeto do github tá com ../notes quando deveria estar ./notes, só corta um ponto que vai funcionar.
@jrsimione Жыл бұрын
@@Canal_Marte funfo não
@viniciusamancio27 Жыл бұрын
as minhas notas não param de soar mesmo eu parando de clicar/teclar a nota, tá certo? kkk
@edsonguerra4407 Жыл бұрын
Até a marcha nupcial agente aprendeu a tocar.
@MakoNext 11 ай бұрын
Cara... onde que eu aprendo a ter esse olhar artistico pros meus projetos? Não me adianta muito saber CSS e implementar de acordo com o que o Designer fez no meu trampo, quando nos meus projetos pessoais tudo fica com cara de frontend feito por programador backend kkkkkkkkkkk
@YannAntunesFurlan Жыл бұрын
top demais, mas esse teclado é pra canhoto ou destro? kkkkkk
@ManualdoDev Жыл бұрын
kkkkkkkk
@rafasantos23 Жыл бұрын
1 - Lista de todos os vídeos e projetos ruins já produzido por esse canal!!!!
@ManualdoDev Жыл бұрын
Hahahahahahh
Manual do Dev
Рет қаралды 14 М.
Manual do Dev
Рет қаралды 96 М.
The BN Family
Рет қаралды 20 МЛН
Manual do Dev
Рет қаралды 101 М.
Manual do Dev
Рет қаралды 12 М.
Canaltech
Рет қаралды 5 М.
Filipe Deschamps
Рет қаралды 831 М.
Manual do Dev
Рет қаралды 13 М.