Como criar um Piano completo com HTML, CSS e JavaScript

Подписаться 57 тыс.

Просмотров 13 тыс.

50% 1

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/manualdodev/piano
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

Опубликовано:

13 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@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

@faba00r0chjr7 Год назад

muito fã dos conteúdos daqui, valeu mesmo, sigo aprendendo com o canal !!!

@misterd1581 Год назад

Teu canal é uma maravilha, estou aprendendo muito!

@joaopaulosampaio5357 Год назад

Ficou incrivel esse projeto! Parabéns

@banditow Год назад

Você é fera, obrigado por compartilhar seu conhecimento, nos ajuda d+++

@jhonatanoliveira4183 Год назад

sensacional!!! Que vídeo, meu amigo, que vídeo! Muito obrigado por todo conhecimento que passou através desse tutorial!!!

@telascapow Год назад

Irado, irmão! Tua didática é sensacional. Brigadão por compartilhar teu conhecimento com a gente. Isso ajuda de mais!

@iarlensantos3588 Год назад

Projeto incrível! Cada vez me surpreendo mais com o poder do html, css e js.

@misaelsapiente4124 4 месяца назад

Que aula maravilhosa!! parabéns

@tiagomh1264 Год назад

O cara tá voando na frequência :) aí sim

@ManualdoDev Год назад

hehehehh

@nicpeters3306 6 месяцев назад

Muito obrigado mano! De coração mesmo! Gracias por todo conhecimento compartilhado conosco

@itsmatsouza Год назад

Parabéns por mais esse projeto irmão, muito top! Você ajuda muito a comunidade! Tmj

@ManualdoDev Год назад

Tamo junto, Mateus!

11 месяцев назад

Top das galáxias 🎉🎉🎉

@glendasantossilva3408 Год назад

Parabéns pelo projeto! Didática sensacional, muito bom mesmo.

@ManualdoDev Год назад

Valeu demais, Glenda!

@hstecnologia 11 месяцев назад

Cê Loko o cara faz tao bem e explica tao bem que parece fácil rsrs

@MrCaramos Год назад

O cara é mestre num é a toa, top demais!!!

@ManualdoDev Год назад

Tamo junto, César! Valeu :D

@brunodossantospereira7519 Год назад

Parabéns mano.

@jeanalves197 Год назад

Incrivel! 🥹❤👨🏻‍💻🎶

@hstecnologia 11 месяцев назад

Mano vc é fera mano parabéns

@esthersilva6952 8 месяцев назад

mds cara te amooooo

@N0TZ3R0 Год назад

Muito bom, valeu :)

@kashgar0fc Год назад

Mais uma aula foda

@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

@guerosoometv Год назад

ta Sensacional esse projeto e video ... Esperando videos de react hehe

@ManualdoDev Год назад

O próximo é React, em! Heheheh Valeu demais! Tamo junto!

@Phzin_io Год назад

Foda pá cacete parabéns

@marcelobc2230 Год назад

Mandou hein.....😄 , muito bom!

@ManualdoDev Год назад

Valeu, Marcelo! Tamo junto!

@vitu3566 Год назад

brabo dms

@Itz_IslahAlves Год назад

opa, cheguei, já to animada pra codar :)

@ManualdoDev Год назад

aí sim!!!

@gabrielcavani Год назад

Onde encontrou esse banco de áudios? Queria tentar fazer outro instrumento. Muito bom o vídeo!!!!!

@nicpeters3306 6 месяцев назад

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.

@raycksantos3178 10 месяцев назад

Consegue fazer um tutorial de como usar o soundfont-player api? pra criar um reprodutor midi?

@gabriel.smaniotto Год назад

na próxima traz um projeto com react !!!

@Edits_nick Год назад

Tem como colocar o sistema de MID pra conectar com outro teclado no Javascript?

@Histdesuspense4 6 месяцев назад

Onde que consegue os arquivos das notas do piano?

@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)

@LennWeltmeister Год назад

Eu tinha criado uns meses atrás um mini sintetizador, só que nunca terminei kkk

@NatanaelGamer-wd7gb 6 месяцев назад

os áudios são legais

@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.

@user-ct9mt7jf7q 6 месяцев назад

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

@ViniciusEspindula 10 месяцев назад

A musica não esta reproduzindo no meu piano :/

@chabetiico Год назад

Vou contratar tu pra tocar no meu casamento cara, parece o Beethoven

@ManualdoDev Год назад

kkkkkkk

@viniciusamancio27 Год назад

as minhas notas não param de soar mesmo eu parando de clicar/teclar a nota, tá certo? kkk

@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

@farmeer Год назад

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.

@edsonguerra4407 Год назад

Até a marcha nupcial agente aprendeu a tocar.

@YannAntunesFurlan Год назад

top demais, mas esse teclado é pra canhoto ou destro? kkkkkk

@ManualdoDev Год назад

kkkkkkkk

@MakoNext 9 месяцев назад

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