Skip to content
← Back to Community
Patatap Clone 🎢🎡
Profile icon
h
has Hacker Plan
JDOG787

Hi Everyone!

Hope everyone is doing well. Today The last couple of days Ive been making this. It is a patatap clone! if you don't know what patatap is, check it out here! It's a really cool website and has some pretty impressive animations! Anyways this is a clone of that. The animations aren't quite as impressive as the original, but still cool. I had a lot of fun making this! Also each letter key has an animation and its own sound. There are only three animations, so each row of letter keys has its own animation!

Thx :)

If you liked this, go ahead and upvote!

Voters
Profile icon
JDOG787
Profile icon
SeaIT
Profile icon
IroncladDev
Profile icon
ch1ck3n
Profile icon
Aivoybia
Profile icon
Alice688
Profile icon
MariamSayed05
Profile icon
AngelStarLight
Profile icon
RobertFurr
Profile icon
lilykhan
Comments
hotnewtop
Profile icon
Bookie0

Me spamming my keyboard:

tenor

Creates harmony:
angels%20singing_edited

Wow lol

Profile icon
JDOG787
Profile icon
python88
Profile icon
JBloves27
Profile icon
Gabby8C0des8

@Bookie0 lmao same

Profile icon
Alice688

Love it!

Profile icon
JDOG787
Profile icon
Alice688
Profile icon
JDOG787
Profile icon
RolandJLevy

Hey @JDOG787, this is great - well done!

Profile icon
JDOG787

@rjlevy Thanks :)

Profile icon
RolandJLevy

@JDOG787, have you thought of implementing the filter property? If you used it with transitions you could get some great effects. Something like this filter: blur(10px) hue-rotate(180deg) opacity(0.5);

Profile icon
JDOG787

@rjlevy Well I used js to make the animations (gasp) but I should still work. Thanks for the suggestion, ill have to look in to it. :)

Profile icon
RolandJLevy

@JDOG787, ah OK. I thought you were using CSS on it's own. I haven't heard of gsap. It looks really good πŸ‘

Profile icon
JDOG787

@rjlevy Oh ok. yes its easy to use. You should try it sometime :)

Profile icon
RolandJLevy

@JDOG787 thanks, I'll check it out. Also, I haven't heard of howler

Profile icon
FloCal35

Nobody
Me using this program to make a song

Profile icon
JDOG787
Profile icon
Muhammad_SJC

WHAT IS THIS!!!!!!!!!!!
I have NEVER EVER seen something so nice made out of HTML, CSS and JS! :)

Profile icon
JDOG787

@Muhammad_SJC thx! xD

Profile icon
EpicGamer007

Wow I love the animations and music, noice!!!!!

Profile icon
JDOG787
Profile icon
Gabby8C0des8

this is so cool! i could use this to make a beat for a song :)

Profile icon
JDOG787
Profile icon
Gabby8C0des8

@JDOG787 np :D

Profile icon
JDOG787
Profile icon
python88

do mqmqmq

Profile icon
JDOG787
Profile icon
python88

cool!

Profile icon
JDOG787
Profile icon
Codemonkey51

COOL

Profile icon
JDOG787
Profile icon
[deleted]

Hold down W.

Profile icon
JDOG787

@CarlosRosiles Ahh my ears xD

Profile icon
Bookie0

Hold down E (makes gun sounds) @CarlosRosiles

Profile icon
JDOG787
Profile icon
Coder100

Cool!

Profile icon
JDOG787
Profile icon
AgastyaSandhuja

pro

Profile icon
JDOG787
Profile icon
RohilPatel

WOAH!!!!!!!!!!

Profile icon
JDOG787
Profile icon
zplusfour

Interesting...
Good job!

Profile icon
JDOG787

@ZDev1 thank you

Profile icon
zplusfour
Profile icon
JDOG787
Profile icon
Vandesm14

This is awesome! One issue, some keys play the same sounds. Other than that, great website!

Profile icon
JDOG787

@Vandesm14 Thx! I forgot to change the sounds after I copied and pasted lol. fixed now though!

Profile icon
Vandesm14
Profile icon
JDOG787
Profile icon
NighKnight

can someone post a link with the sound files, to lit to be left alone

Profile icon
JDOG787
Profile icon
NighKnight

@JDOG787 do you have a url that points to the files, or are we going to have to manually download them through repl.it

Profile icon
JDOG787

@nightKnight0 ohhh ok. well there might be a url but you can just download them here!

Profile icon
bgrubert

Such a cool idea. I love the sounds it makes

Profile icon
JDOG787
Profile icon
HahaYes

Yay this was featured on Zwacc's post good job jdog!

Profile icon
JDOG787

@HahaYes I KNOW! thx!

Profile icon
HahaYes

@JDOG787 and he upvoted!

Profile icon
JDOG787

@HahaYes wait what?

Profile icon
HahaYes

@JDOG787 zwacc voted lol

Profile icon
JDOG787

@HahaYes wow :D

Profile icon
HahaYes

@JDOG787
image

Profile icon
JDOG787

@HahaYes I saw

Profile icon
DJWang

Hey, as a piano player, I honestly think this is the best game I've played in the 11 years of my life. I wish I could upvote more than once! :)

Just one suggestion: Other than the drums (Which I LOVE) I really like the sound of the letter "k" if you know what I mean. Could you make it all the same key, so that it will create harmonic music? Thanks!

Profile icon
JDOG787

@DJWang Hi! thx! glad you like it. Also I can't really do that cuz there are only enough sounds for each letter key and thats isn't really the point(more about the unique sounds with animations). But maybe sometime I will take this idea and make a piano app. thx!

Profile icon
PeidoMolhado

Man, i dont know whether is it on pourpose but whenever i keep pressing the same key, it kinda crashes the sound a little bit. To solve this issue you might wanna change the JS event from keypress to maybe keydown or keyup. I found really interesting your code, i literally just passed the past 30 minutes typing things into it. Hope i could help you on to improving this issue.

Profile icon
JDOG787

@PeidoMolhado Yeah I noticed that too. Not much you can do other than what you said which is easy but I don't know that you can hold the button down then which, sometimes even thought it doesn't sound quite as good, its cool. But thx anyways :D

Profile icon
DevTony

It would be awesome if you could somehow encode a word (or a phrase) in its equivalent sounds. Great work!

Profile icon
JDOG787

@DevTony wdym? also thx

Profile icon
Kookiez

wow, cool!

Profile icon
JDOG787
Profile icon
hihitherethere

Its so good!!! You should probably include the numbers as well if you can for more sounds

Profile icon
JDOG787

@hihitherethere Thx! also the there are only sounds for the letter keys. patatap only uses the letter keys. :)

Profile icon
[deleted]

Do d u dd uu d u dd uu (it sounds like the beginning of all star by smash mouth)

Profile icon
[deleted]

@AJDevelopment holding down h sounds horrifying

Profile icon
[deleted]

@AJDevelopment tuning instruments while hyper be like gsgfrufyhgryjujrheopirkuuhgqyuygcvelhkjhcvkejhgfegjhbenmjhcgvnbmnfbvhckjhbcwdjnbvdcgnjdbvghk

Profile icon
JDOG787
Profile icon
iArc49

IMG_20200926_133351
someone help

Profile icon
zplusfour

@iArc49 you need someone to help you on this post???
make an ask post!

Profile icon
zplusfour

@iArc49 anyway line 12
#include "studio.h"
not #include "studio,h

Profile icon
JDOG787

@iArc49 Hi, can you pls not ask here? If you need help make a post on the ask board. Thx!

Profile icon
gibbsfreenergy

Although I find this quite pointless GOOD JOB!

Profile icon
JDOG787

@JosephSanthosh its to waste time :D lol. THX

Profile icon
gibbsfreenergy

Exactly. @JDOG787

Profile icon
JDOG787