{"id":34,"date":"2025-06-04T04:00:53","date_gmt":"2025-06-04T04:00:53","guid":{"rendered":"https:\/\/gurencodes.com\/blog\/wordpress\/?p=34"},"modified":"2025-06-04T05:15:18","modified_gmt":"2025-06-04T05:15:18","slug":"project-10-javascript-piano","status":"publish","type":"post","link":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/2025\/06\/04\/project-10-javascript-piano\/","title":{"rendered":"Project #10:\u00a0Javascript piano"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/safebooru.org\/\/samples\/4367\/sample_93173decaefb349f70897243f02d5d2a5fdf9df7.jpg?5821208\" alt=\"&gt;_< 1girl asymmetrical_horns bird black_flower black_gloves black_hair black_horns black_jacket black_skirt black_sleeves blue_hair breasts closed_eyes closed_mouth clothing_cutout collared_shirt colored_inner_hair commentary crow demon_horns detached_sleeves english_commentary floating_hair flower gloves grand_piano hair_ornament heart heart-shaped_eyes highres hololive hololive_english horn_flower horns instrument jacket jailbird_(nerissa_ravencroft) large_breasts long_hair looking_at_viewer mole mole_under_eye multicolored_hair musical_staff nerissa_ravencroft nerissa_ravencroft_(1st_costume) piano red_eyes shadow_(nerissa_ravencroft) sheet_music shirt shoulder_cutout sitting skirt solo sparkle tassel tassel_hair_ornament two-tone_hair uneven_horns very_long_hair virtual_youtuber white_shirt xiisalt\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/javascript-piano.pages.dev\/\" data-type=\"link\" data-id=\"https:\/\/javascript-piano.pages.dev\/\">Link<\/a><\/p>\n\n\n\n<p><strong>Estimated date of creation:<\/strong>&nbsp;December 2022<\/p>\n\n\n\n<p><strong>Status:<\/strong>&nbsp;Online \ud83d\udfe2<\/p>\n\n\n\n<p>This is a playable piano keyboard for your browser. But it is pretty simple. It&#8217;s pretty much the same onClick button system as I used in the meme soundboard. I did also use event listeners though, which wait for a key to be pressed. So you can use your text keyboard to play the piano. But I also didn&#8217;t map every key, it seems. And also, for some reason, when the note is pressed with your computer keyboard key, it doesn&#8217;t visually go down. But it visually goes down if you use your mouse to click on the key. So that&#8217;s weird.<\/p>\n\n\n\n<p>In the Javascript, everything that isn&#8217;t the first 4 lines in that file was about mapping the computer keyboard so it would play the piano.<\/p>\n\n\n\n<p>For some reason, I have an AJAX\/JQuery download in my html head, but I don&#8217;t think those were used in this at all.<\/p>\n\n\n\n<p>The piano shape was based on the piano we had to draw out of CSS in the FreeCodeCamp course. They don&#8217;t teach about how to turn it into an instrument, though. That was just putting rectangles next to each other. I had to learn about event listeners from StackOverflow quite a bit. And I spent a lot of time reading about them on MDN.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Link Estimated date of creation:&nbsp;December 2022 Status:&nbsp;Online \ud83d\udfe2 This is a playable piano keyboard for your browser. But it is pretty simple. It&#8217;s pretty much the same onClick button system as I used in the meme soundboard. I did also use event listeners though, which wait for a key to be pressed. So you can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-34","post","type-post","status-publish","format-standard","hentry","category-code-projects"],"_links":{"self":[{"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":2,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/34\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gurencodes.com\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}