I am writing a javascript application, I need to attach each computer key to a specific button. I want to create a kind of drum machines.

Here is the html code:

<div class="dramm-mashine-box__top"> <button type="button" class="btn" id="btn-1">1</button> <button type="button" class="btn" id="btn-2">2</button> <button type="button" class="btn" id="btn-3">3</button> <button type="button" class="btn" id="btn-4">4</button> <button type="button" class="btn" id="btn-5">5</button> <button type="button" class="btn" id="btn-6">6</button> <button type="button" class="btn" id="btn-7">7</button> <button type="button" class="btn" id="btn-8">8</button> <button type="button" class="btn" id="btn-9">9</button> <button type="button" class="btn" id="btn-0">0</button> </div>
  • Maybe you want to bind the keyboard key - user218976
  • Exactly. Maybe I made a reservation? Well, exactly, I need to bind to the keyboard key. - Arthur

2 answers 2

By fanu wrote it myself.

 const arr = [] let sum = 0 const keys = document.querySelectorAll('.key') keys.forEach(key => key.addEventListener('transitionend', removeTransition)) window.addEventListener('keydown', playSound) function playSound(e) { const attr = `[data-key="${e.key}"]` const audio = document.querySelector('audio' + attr) const key = document.querySelector('div' + attr) if (!key) return key.classList.add('playing') audio.currentTime = 0 audio.play() arr.push(event.key) document.querySelector('.output').innerHTML = arr.join(', ') document.querySelector('.sum').innerHTML = sum += +event.key } function removeTransition(e) { if (e.propertyName !== 'transform') return this.classList.remove('playing') } 
 body, html { margin: 0; padding: 0; font-family: sans-serif; font-size: 10px; } .output { text-align: center; font-size: 20px } .output-sum { text-align: center; font-size: 30px } .keys { display: flex; flex: 1; min-height: 100vh; align-items: center; justify-content: center; } .key { border: .4rem solid black; border-radius: .5rem; margin: 1rem; font-size: 1.5rem; padding: 1rem .5rem; transition: all .07s ease; width: 10rem; text-align: center; color: white; background: rgba(0,0,0,0.4); text-shadow: 0 0 .5rem black; } .playing { transform: scale(1.1); border-color: #ffc600; box-shadow: 0 0 1rem #ffc600; } kbd { display: block; font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .1rem; color: #ffc600; } 
 <div class="output">НаТмитС Ρ†ΠΈΡ„Ρ€Ρƒ</div> <div class="output-sum">Π‘ΡƒΠΌΠΌΠ° Ρ†ΠΈΡ„Ρ€: <sapn class="sum">0</span></div> <div class="keys"> <div data-key="1" class="key"> <kbd>1</kbd> <span class="sound">clap</span> </div> <div data-key="2" class="key"> <kbd>2</kbd> <span class="sound">hihat</span> </div> <div data-key="3" class="key"> <kbd>3</kbd> <span class="sound">kick</span> </div> <div data-key="4" class="key"> <kbd>4</kbd> <span class="sound">openhat</span> </div> <div data-key="5" class="key"> <kbd>5</kbd> <span class="sound">boom</span> </div> <div data-key="6" class="key"> <kbd>6</kbd> <span class="sound">ride</span> </div> <div data-key="7" class="key"> <kbd>7</kbd> <span class="sound">snare</span> </div> <div data-key="8" class="key"> <kbd>8</kbd> <span class="sound">tom</span> </div> <div data-key="9" class="key"> <kbd>9</kbd> <span class="sound">tink</span> </div> <div data-key="0" class="key"> <kbd>0</kbd> <span class="sound">clap</span> </div> </div> <audio data-key="1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio> <audio data-key="2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/OH25.mp3"></audio> <audio data-key="3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0025.mp3"></audio> <audio data-key="4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CY0010.mp3"></audio> <audio data-key="5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio> <audio data-key="6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CH.mp3"></audio> <audio data-key="7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/SD0010.mp3"></audio> <audio data-key="8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/OH25.mp3"></audio> <audio data-key="9" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CB.mp3"></audio> <audio data-key="0" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/CP.mp3"></audio> 

     // создадим ΠΊΠΎΠ»Π»Π΅Ρ†ΠΈΡŽ клавиша > ΠΊΠ½ΠΎΠΏΠΊΠ° const $buttons = $('.dramm-mashine-box__top button'); const keyMap = new Map(); $buttons.each((i, btn) => { // Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· id ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ // Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· data-attribute keyMap.set(btn.innerHTML, btn); }); function handleButtonPress() { // Π΄Π΅Π»Π°Π΅ΠΌ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚ΠΈΠΌ // ΠΊΠ½ΠΎΠΏΠΊΠ° доступна ΠΏΠΎ this $(this).addClass('pressed'); } function handleButtonUnPress() { $(this).removeClass('pressed'); } $(document).on('keypress', function (event) { const code = event.key; const button = keyMap.get(code); if(button) handleButtonPress.call(button); }); $(document).on('keyup', function (event) { const code = event.key; const button = keyMap.get(code); if(button) handleButtonUnPress.call(button); }); 
     button.pressed { outline: 1px solid yellow; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dramm-mashine-box__top"> <button type="button" class="btn" id="btn-1">1</button> <button type="button" class="btn" id="btn-2">2</button> <button type="button" class="btn" id="btn-3">3</button> <button type="button" class="btn" id="btn-4">4</button> <button type="button" class="btn" id="btn-5">5</button> <button type="button" class="btn" id="btn-6">6</button> <button type="button" class="btn" id="btn-7">7</button> <button type="button" class="btn" id="btn-8">8</button> <button type="button" class="btn" id="btn-9">9</button> <button type="button" class="btn" id="btn-0">0</button> </div>