made with react.js

Make A Beat

Collaborative Beat Maker

Visit Site

Description

Collaborative Beat Maker

"Make A Beat is a free multiplayer browser-based beat maker designed for quick musical sketches. Users can simply open a tab and start creating instantly. It features a real-time multiplayer mode for jamming with friends and built-in AI tools to generate custom audio samples on the fly.

Make a Beat is a real-time, collaborative music production app built with React (Vite) and Tailwind CSS. The sequencer & audio engine at the core of the experience is a multiplayer step-sequencer. The audio timing and playback are powered by Tone.js (built on top of the Web Audio API), ensuring precise synchronization of instrument hits across the grid.

The React frontend manages the complex state of the sequences, instruments, and BPM. To make the experience seamless for multiple users, the React state is tightly coupled with Socket.io. Every time a user toggles a beat, changes an instrument, or moves their cursor, the state is optimistically updated in the UI and instantly synced to the server, broadcasting the grid state to all other players in the room with near-zero latency."


Social Media Links

Creatica Vector SVG Background Generator
icon-eye-dark Created with Sketch. 577
pubg.sh 2D Replays of PlayerUnknown's Battleground Matches
icon-eye-dark Created with Sketch. 2.599
Sentry for React React Application Monitoring
💙 Sponsored by Friends
Sectors Without Number Sector Generator for the Roleplaying Game Stars Without Numbers
icon-eye-dark Created with Sketch. 598
Codesandbox Online Code Editor
icon-eye-dark Created with Sketch. 6.089
Cal.com Open-source Scheduling App
icon-eye-dark Created with Sketch. 2.583