A browser-based music application featuring recreations of the iconic Roland TR-909 Drum Machine and Roland TB-303 Bass Synthesizer. Create classic electronic music sounds directly in your browser with no installation required!
- 11 Drum Sounds: Kick, Snare, Hi-Hats (Open/Closed), Toms (Low/Mid/High), Rimshot, Clap, Crash, and Ride
- 16-Step Sequencer: Classic step sequencer for programming drum patterns
- Interactive Drum Pads: Play sounds in real-time by clicking or tapping
- Synthesized Sounds: Authentic analog-style synthesis using Tone.js
- Visual Feedback: See which steps are playing in real-time
- Classic Acid Bass: Signature TB-303 sound with resonant filter
- Multiple Waveforms: Sawtooth, Square, and Triangle oscillators
- Filter Controls: Cutoff, Resonance, and Envelope Modulation
- Envelope Shaping: Decay and Accent controls for dynamic expression
- 16-Step Bass Sequencer: Program complex basslines with note, octave, accent, and slide
- Interactive Keyboard: Play notes in real-time
- BPM Control: Adjustable tempo from 60-200 BPM
- Master Volume: Independent volume control for each instrument
- Play/Pause/Stop: Full transport controls
- Pattern Management: Clear and create new patterns
- Responsive Design: Works on desktop, tablet, and mobile devices
- Touch Support: Optimized for touch interactions on mobile
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/Justin-Kase/BrowserMusic.git
cd BrowserMusic- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run buildThe built files will be in the dist directory.
npm run preview- Switch to TR-909: Click the "TR-909" button in the header
- Play Drum Pads: Click or tap any drum pad to hear the sound
- Program Patterns:
- Click steps in the sequencer grid to activate/deactivate them
- Steps with beat markers (every 4th step) help with timing
- Each row represents a different drum sound
- Start Sequencer: Click the "Play" button to start the sequence
- Adjust Tempo: Use the BPM slider to change the speed
- Clear Pattern: Click "Clear Pattern" to start over
- Switch to TB-303: Click the "TB-303" button in the header
- Play Keyboard: Click the keyboard keys to play notes
- Adjust Sound:
- Waveform: Choose between Saw, Square, or Triangle
- Cutoff: Control the filter frequency (100-8000 Hz)
- Resonance: Add filter resonance for that classic acid sound
- Env Mod: Modulate the filter with the envelope
- Decay: Control how long notes sustain
- Accent: Set the accent intensity
- Program Patterns:
- Click any of the 16 steps to select it
- Choose the note, octave, accent, and slide for each step
- "Rest" means the step will be silent
- Accent (A) makes the note louder with more filter
- Slide (S) glides from the previous note
- Start Sequencer: Click "Play" to hear your bassline
- React 18: Modern UI framework
- TypeScript: Type-safe development
- Tone.js: Web Audio framework for sound synthesis
- Vite: Fast build tool and dev server
- CSS3: Custom styling with gradients and animations
BrowserMusic/
├── src/
│ ├── audio/ # Audio engine implementations
│ │ ├── TR909Engine.ts # TR-909 drum synthesis and sequencing
│ │ └── TB303Engine.ts # TB-303 bass synthesis and sequencing
│ ├── components/
│ │ ├── Header/ # App header with instrument switcher
│ │ ├── TR909/ # TR-909 components
│ │ │ ├── TR909.tsx
│ │ │ ├── TR909Controls.tsx
│ │ │ ├── DrumPads.tsx
│ │ │ └── Sequencer.tsx
│ │ └── TB303/ # TB-303 components
│ │ ├── TB303.tsx
│ │ ├── TB303Controls.tsx
│ │ └── TB303Sequencer.tsx
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
The application uses Tone.js to create authentic analog-style sounds entirely in the browser:
- MembraneSynth: Used for kick drum and toms with pitch envelope
- NoiseSynth: Used for snare and clap with filtered noise
- MetalSynth: Used for hi-hats, rimshot, crash, and ride with metallic timbres
- Step Sequencer: 16-step pattern with per-drum-per-step programming
- MonoSynth: Single-voice synthesizer with filter envelope
- Lowpass Filter: Resonant filter for classic acid sound
- Frequency Envelope: Modulates filter cutoff over time
- Pattern Sequencer: 16-step bass sequencer with note, octave, accent, and slide
The application is fully responsive and works on:
- Desktop: Full-featured experience with mouse interactions
- Tablet: Touch-optimized with larger hit areas
- Mobile: Optimized layouts with touch support
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow TypeScript best practices
- Maintain the existing code style
- Add comments for complex logic
- Test on multiple browsers and devices
- Ensure mobile responsiveness
Future features planned:
- Effects Chain: Add reverb, delay, and distortion effects
- MIDI Support: Connect external MIDI controllers
- Preset Management: Save and load patterns and settings
- Pattern Chaining: Link multiple patterns together
- Audio Export: Record and download your creations
- More Instruments: Add more classic synthesizers and drum machines
- Collaborative Mode: Real-time collaboration with other users
This project is licensed under the MIT License - see the LICENSE file for details.
- Roland Corporation for the original TR-909 and TB-303 hardware
- Tone.js for the excellent Web Audio framework
- The electronic music community for inspiration
Justin Case - @Justin-Kase
Project Link: https://github.com/Justin-Kase/BrowserMusic
Recreate classic acid house and techno sounds. Happy music making!
Note: This is a recreation for educational and creative purposes. TR-909 and TB-303 are trademarks of Roland Corporation.