https://github.com/inna-b10/soundboard

"Soundboard" is a project built with Vanilla JavaScript that triggers sound effects when specific keyboard keys are pressed. Styled to look like a functional and visually appealing soundboard, enhancing the user experience with smooth interactivity and clear design.
https://github.com/inna-b10/soundboard

css project vanilla-javascript

Last synced: about 1 month ago
JSON representation

"Soundboard" is a project built with Vanilla JavaScript that triggers sound effects when specific keyboard keys are pressed. Styled to look like a functional and visually appealing soundboard, enhancing the user experience with smooth interactivity and clear design.

• Host: GitHub
• URL: https://github.com/inna-b10/soundboard
• Owner: Inna-B10
• Created: 2024-02-17T01:35:21.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T13:32:22.000Z (about 2 years ago)
• Last Synced: 2025-08-09T15:32:00.512Z (11 months ago)
• Topics: css, project, vanilla-javascript
• Language: JavaScript
• Homepage: https://soundboard-innab10.netlify.app/
• Size: 7.01 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Project name: Soundboard

### Project Goals:

- Creating a soundboard with eventlisteners that are activated when pressing keyboard keys.

- Style this assigment properly so it actually looks like a soundboard!

## 💎 Description

[](preview.png)

This is my very first project using JavaScript, marking my initial hands-on experience with the language. The main purpose of this project was to explore JavaScript fundamentals, including event listeners, DOM manipulation, and basic UI interactions, while creating a fun and interactive soundboard.

### Features

- **Key-triggered sounds:** Play different sounds by pressing specific keyboard keys.

- **STOP button:** Instantly stops all currently playing sounds. Can also be triggered with the `Space` key.

- **Volume control:** Adjust the playback volume dynamically with a slider.

- **Playback speed control:** Change the speed of the sounds in real time.

- **Soundboard toggle:** Turn the soundboard on or off. When on, the interface lights up, and during playback, the name of the currently playing file is displayed. When off, all highlights and indicators are turned off.

### 🧩 Built With

![HTML](https://img.shields.io/badge/HTML-424242?logo=html5)

![CSS](https://img.shields.io/badge/CSS-424242?logo=css)

![JavaScript](https://img.shields.io/badge/JavaScript-424242?logo=javascript)

### 🚀 [View demo](https://soundboard-innab10.netlify.app/)