{"id":1050,"date":"2019-07-20T20:19:21","date_gmt":"2019-07-21T03:19:21","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=1050"},"modified":"2019-07-30T17:32:44","modified_gmt":"2019-07-31T00:32:44","slug":"myjsdrumkit","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/raspian-linux-programs\/javascript-2\/myjs30\/myjsdrumkit\/","title":{"rendered":"myJSDrumKit"},"content":{"rendered":"\n<div class=\"keys\">\n    <div data-key=\"65\" class=\"key\">\n      <kbd>A<\/kbd>\n      <span class=\"sound\">clap<\/span>\n    <\/div>\n    <div data-key=\"83\" class=\"key\">\n      <kbd>S<\/kbd>\n      <span class=\"sound\">hihat<\/span>\n    <\/div>\n    <div data-key=\"68\" class=\"key\">\n      <kbd>D<\/kbd>\n      <span class=\"sound\">kick<\/span>\n    <\/div>\n    <div data-key=\"70\" class=\"key\">\n      <kbd>F<\/kbd>\n      <span class=\"sound\">openhat<\/span>\n    <\/div>\n    <div data-key=\"71\" class=\"key\">\n      <kbd>G<\/kbd>\n      <span class=\"sound\">boom<\/span>\n    <\/div>\n    <div data-key=\"72\" class=\"key\">\n      <kbd>H<\/kbd>\n      <span class=\"sound\">ride<\/span>\n    <\/div>\n    <div data-key=\"74\" class=\"key\">\n      <kbd>J<\/kbd>\n      <span class=\"sound\">snare<\/span>\n    <\/div>\n    <div data-key=\"75\" class=\"key\">\n      <kbd>K<\/kbd>\n      <span class=\"sound\">tom<\/span>\n    <\/div>\n    <div data-key=\"76\" class=\"key\">\n      <kbd>L<\/kbd>\n      <span class=\"sound\">tink<\/span>\n    <\/div>\n  <\/div>\n\n  <audio data-key=\"65\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/clap1.wav\"><\/audio>\n  <audio data-key=\"83\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/hihat1.wav\"><\/audio>\n  <audio data-key=\"68\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/kick1.wav\"><\/audio>\n  <audio data-key=\"70\" src=\"https:\/\/raw.githubusercontent.com\/wesbos\/JavaScript30\/master\/01%20-%20JavaScript%20Drum%20Kit\/sounds\/openhat.wav\"><\/audio>\n  <audio data-key=\"71\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/boom2.wav\"><\/audio>\n  <audio data-key=\"72\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/ride1.wav\"><\/audio>\n  <audio data-key=\"74\" src=\"https:\/\/raw.githubusercontent.com\/wesbos\/JavaScript30\/master\/01%20-%20JavaScript%20Drum%20Kit\/sounds\/snare.wav\"><\/audio>\n  <audio data-key=\"75\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/tom1.wav\"><\/audio>\n  <audio data-key=\"76\" src=\"https:\/\/raw.githubusercontent.com\/wesbos\/JavaScript30\/master\/01%20-%20JavaScript%20Drum%20Kit\/sounds\/tink.wav\"><\/audio>\n\n<script>\n  function removeTransition(e) {\n    if (e.propertyName !== 'transform') return;\n    e.target.classList.remove('playing');\n  }\n  function playSound(e) {\n    const audio = document.querySelector(`audio[data-key=\"${e.keyCode}\"]`);\n    const key = document.querySelector(`div[data-key=\"${e.keyCode}\"]`);\n    if (!audio) return;\n    key.classList.add('playing');\n    audio.currentTime = 0;\n    audio.play();\n  }\n  const keys = Array.from(document.querySelectorAll('.key'));\n  keys.forEach(key => key.addEventListener('transitionend', removeTransition));\n  window.addEventListener('keydown', playSound);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>A clap S hihat D kick F openhat G boom H ride J snare K tom L tink<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1022,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1050","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=1050"}],"version-history":[{"count":0,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1050\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1022"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=1050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}