Skip to content

Sound Sandbox is an interactive web application for creating and manipulating sounds. It features a drum pad, sound upload, channel rack, and control pad. Built with HTML, CSS, JavaScript, jQuery UI, and js-snackbar.

License

Notifications You must be signed in to change notification settings

oriolmontcreus/vanilla-audio-sandbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎵 Sound Sandbox 🎵

Try it here (Github Pages)

Sound Sandbox is an interactive web application that allows users to create and manipulate sounds in a fun and intuitive way.

🌟 Features

  • 🥁 Drum Pad: The application includes a drum pad that can be used to play different sounds. Each pad corresponds to a different sound and can be triggered by clicking on it or pressing the corresponding key on the keyboard.

  • 📤 Sound Upload: Users can upload their own audio files to be used in the drum pad. The application supports all audio file types.

  • 🎛️ Channel Rack: The channel rack allows users to sequence sounds in a grid-like interface. Each row corresponds to a different sound and each column corresponds to a different point in time.

  • 🎮 Control Pad: The control pad allows users to control the playback of the sounds sequenced in the channel rack.

🚀 Getting Started

To get started with Sound Sandbox, it's recommended to use the Live Server extension in Visual Studio Code. After installing the extension, right-click on the index.html file and select "Open with Live Server". This will open your default web browser and run the application.

🛠️ Technologies Used

Technology Description Link
HTML Used for structuring the web content. Learn More
CSS Used for styling the web content. Learn More
JavaScript Used for creating interactive web content. Learn More
jQuery UI A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Learn More
js-snackbar A simple, lightweight JavaScript library for displaying snackbars. GitHub Repository

📸 Preview

Preview image 1
Preview image 2
Preview image 3

(Enable audio!!)

previewVideo.mp4

About

Sound Sandbox is an interactive web application for creating and manipulating sounds. It features a drum pad, sound upload, channel rack, and control pad. Built with HTML, CSS, JavaScript, jQuery UI, and js-snackbar.

Topics

Resources

License

Stars

Watchers

Forks