---
id: 587d7dbc367417b2b2512bae
title: Створити драм-машину (ритм-машину)
challengeType: 3
forumTopicId: 301370
dashedName: build-a-drum-machine
---

# --description--

**Мета:** створити застосунок, функціонально схожий до цього: <a href="https://drum-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://drum-machine.freecodecamp.rocks/</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Ви можете по-різному поєднувати HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery для завершення цього проєкту. Слід використовувати frontend framework (наприклад, React), тому що цей розділ присвячений саме їх вивченню. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо підтримку інших frontend framework, таких як Angular та Vue, але вони наразі не підтримуються. Ми візьмемо до уваги та спробуємо виправити всі звіти з зазначеними проблемами, пов'язані із запропонованою технологічною базою для виконання цього проєкту. Вдалого програмування!

**Історія користувача #1:** Я маю бачити зовнішній контейнер з відповідним `id="drum-machine"`, який містить всі інші елементи.

**Історія користувача #2:** У межах `#drum-machine` я можу бачити елемент з відповідним `id="display"`.

**Історія користувача #3:** У межах `#drum-machine` я бачу 9 клікабельних елементів барабанних педів, кожен з іменем класу `drum-pad`, унікальним ідентифікатором, що описує звукозапис, який барабанні педи приводить в дію, та внутрішнім текстом, що відповідає одній з наступних клавіш на клавіатурі: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Барабанні педи ПОВИННІ бути саме в цьому порядку.

**Історія користувача #4:** У межах кожного `.drum-pad` має бути елемент HTML5 `audio`, який має атрибут `src`, що вказує на звукозапис, ім’я класу `clip` та ідентифікатор, що відповідає внутрішньому тексту головного `.drum-pad` (наприклад, `id="Q"`, `id="W"`, `id="E"` тощо).

**Історія користувача #5:** Коли я натискаю на елемент `.drum-pad`, звукозапис у його дочірньому елементі `audio` повинен бути запущеним.

**Історія користувача #6:** Коли я натискаю кнопку запуску, пов'язану з кожним `.drum-pad`, звукозапис у його дочірньому елементі `audio` повинен бути запущеним (наприклад, натискання ключа доступу `Q` має запускати барабанний пед, що містить рядок `Q`, натискання ключа доступу `W` має запускати барабанний пед, що містить рядок `W`, тощо).

**Історія користувача #7:** Коли `.drum-pad` запускається, рядок, що описує відповідний звуковий запис, відображається як внутрішній текст елемента `#display` (кожен рядок має бути унікальним).

Ось декілька зразків аудіо, які можна використовувати для драм-машини:

- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3)
- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3)
- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3)
- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3)
- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3)
- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3)
- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3)
- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3)
- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3)

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">використовуючи цей шаблон CodePen</a> і натиснувши `Save`. Або ж ви можете скористатися цим посиланням на CDN, щоб запустити тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

# --solutions--

```js
// solution required
```
