WebBeat

Description

WebBeat is a revolutionary web-based drum machine, designed for music enthusiasts and beat makers. Inspired by the iconic SP404 and Akai MPC, this application transforms your browser into a dynamic beat production studio. With its intuitive layout and responsive design, WebBeat is perfect for creating unique drum patterns and experimenting with rhythms on the fly. Whether you're a beginner or a seasoned producer, WebBeat offers an engaging platform to unleash your musical creativity.

Features

• 16 Drum Pads with Unique Sounds: Tap into a diverse range of drum sounds assigned to keys 1, 2, 3, 4, Q, W, E, R, A, S, D, F, Z, X, C, V.
• Interactive Backing Track Control: Use the space bar to play/pause a backing track, and the left arrow key to restart it.
• Waveform Navigation: Visualise the entire track's waveform with WaveSurfer.js and interact with it by clicking or dragging the playhead to adjust playback.
• Responsive and User-friendly UI: Designed for ease of use, the interface is intuitive, making it simple to create beats and manipulate sounds.

How to Use

Creating and manipulating beats in WebBeat is straightforward and fun. Here’s how you can get started:

1. Playing the Drum Pads

   • Use the keys 1-4, QWER, ASDF, ZXCV to play corresponding drum sounds.
   • Each key represents a unique drum pad, allowing you to create complex rhythms.

2. Controlling the Backing Track

   • Press the space bar to play or pause the backing track.
   • Hit the left arrow key to restart the backing track from the beginning.

3. Navigating the Waveform

   • The waveform of the backing track is displayed via WaveSurfer.js.
   • Click or drag on the waveform display to jump to different parts of the track, giving you precise control over playback.

4. Experiment and Create

   • Mix and match drum pad sounds with different sections of the backing track.
   • Experiment with rhythms and patterns to create your unique beats.

Dive into WebBeat and start crafting your beats right in your web browser.

Installation

To set up WebBeat on your local machine:

1. Clone the Repository

   git clone https://github.com/JakebGutierrez/web-beat

This command will clone the repository to your local machine.

2. Install Dependencies

   Navigate to the cloned directory and run:

  npm install

This will install all the necessary dependencies for WebBeat.

3. Start the Application

   Once the dependencies are installed, you can start the application with:

  npm start

This command will start the application and run it on your local server.

4. Access WebBeat

• Open your web browser and go to http://localhost:3000.
• You should now be able to access and use WebBeat on your local machine.

Enjoy creating beats with WebBeat!

Technologies Used

• React.js
• Wavesurfer.js
• HTML
• CSS

Future Improvements

• User Audio Import: Implement functionality for users to upload and assign their own audio files to pads, enhancing personalisation and creativity.

• Sample Slicing Tool: Introduce tools for trimming and slicing imported audio tracks, enabling users to assign these segments to specific pads for intricate beat patterns.

• Advanced Pad Control: Expand pad functionalities to include one-shot/hold modes, volume adjustments, and the ability to switch between various sound banks.

• YouTube Sampling: Develop a feature for sampling directly from YouTube videos, providing a vast library of sounds and inspirations.

• Audio Effects: Add basic audio effects like reverb and delay, with options to apply them to the entire mix or individual pads, enhancing the sound texture.

• Beat Recording and Sequencing: Create a feature for recording live sessions and programming beats, allowing users to compose and save complex rhythms and sequences.

License

This project is open source and available under the MIT License.

Contributing

Contributions to WebBeat are welcome and appreciated. If you're interested in contributing, please follow these steps:

1. Fork the Repository: Create your own fork of the repo.
2. Create a Branch: For each new feature or bug fix, create a new branch based on the main branch.
3. Make Changes: Implement your changes or improvements in your branch.
4. Test Your Changes: Ensure your changes do not break any existing functionalities.
5. Submit a Pull Request: Open a pull request from your branch to the main branch of the original repo. Include a clear description of your changes.

Please note that by contributing, you agree that your contributions will be licensed under its MIT License.

Author

Jakeb Gutierrez