Skip to content

QUICKSTART.md

Latest commit

 

History

History
167 lines (129 loc) · 4.92 KB

QUICKSTART.md

File metadata and controls

167 lines (129 loc) · 4.92 KB

Quick Start Guide

Get started with Browser Music in under 5 minutes!

🎵 What is Browser Music?

Browser Music is a web application that recreates two iconic music machines:

  • Roland TR-909: A legendary drum machine from the 1980s
  • Roland TB-303: The bass synthesizer that defined acid house music

🚀 Getting Started

Option 1: Use Online (Coming Soon)

Visit browsermusic.app and start making music immediately - no installation required!

Option 2: Run Locally

# Clone the repository
git clone https://github.com/Justin-Kase/BrowserMusic.git
cd BrowserMusic

# Install and run
npm install
npm run dev

# Open http://localhost:3000 in your browser

🎮 Your First Beat (TR-909)

  1. Enable Audio: Click the green "Click to Enable Audio" button
  2. Select TR-909: Click the "TR-909" button in the header
  3. Try the Pads: Click any drum pad to hear the sound
  4. Create a Pattern:
    • Click steps in the sequencer grid to activate them
    • Try adding kicks on steps 1, 5, 9, 13
    • Add snares on steps 5 and 13
    • Add closed hi-hats on all steps
  5. Play It: Click the "▶ Play" button
  6. Adjust: Use the BPM slider to change speed (try 120-130 for house music)

🎸 Your First Bassline (TB-303)

  1. Select TB-303: Click the "TB-303" button in the header
  2. Try the Keyboard: Click the keyboard keys to play notes
  3. Adjust the Sound:
    • Move the Cutoff slider up and down to hear the filter
    • Increase Resonance for that classic acid sound
    • Try different Waveforms (Saw is most common)
  4. Create a Pattern:
    • Click step 1 in the sequencer
    • Change the note to "C"
    • Set octave to "2"
    • Enable "Accent"
    • Repeat for different steps with different notes
  5. Play It: Click "▶ Play" and adjust Cutoff and Resonance in real-time!

💡 Tips

Getting Great Sounds

TR-909 Drum Tips:

  • Use kicks on beats 1 and 3 for a basic pattern
  • Add snares on beats 2 and 4
  • Fill in with hi-hats for rhythm
  • Try the clap for classic house vibes
  • Experiment with toms for fills

TB-303 Bass Tips:

  • Start with the Sawtooth waveform
  • Keep Cutoff around 1000-2000 Hz
  • Add Resonance slowly (10-20 range)
  • Use Accent on important notes
  • Use Slide to connect notes smoothly
  • Try simple patterns with just 3-4 different notes

Making Music

  1. Start Simple: Begin with a basic kick drum pattern
  2. Build Layers: Add one element at a time
  3. Use Space: Not every step needs a sound
  4. Experiment: Try random combinations - happy accidents are the best!
  5. Adjust Live: Change parameters while playing for dynamic sounds

🎛️ Controls Explained

Common Controls

  • Play/Pause: Start or pause the sequence
  • Stop: Stop and reset to the beginning
  • BPM: Tempo in beats per minute (60-200)
  • Volume: Master volume control

TR-909 Specific

  • Drum Pads: Click to trigger sounds immediately
  • Sequencer Grid: 16 steps, each row is a drum sound
  • Clear Pattern: Removes all steps

TB-303 Specific

  • Waveform: Changes the oscillator sound (Saw/Square/Triangle)
  • Cutoff: Filter frequency (higher = brighter)
  • Resonance: Filter emphasis (higher = more "acid")
  • Env Mod: How much the envelope affects the filter
  • Decay: How long notes last
  • Accent: Makes selected notes louder and brighter
  • Slide: Glides between notes
  • Keyboard: Play notes in real-time

🎨 Creative Ideas

Classic Patterns

Four-on-the-Floor House Beat:

Kick:      X---X---X---X---
Snare:     ----X-------X---
Closed HH: X-X-X-X-X-X-X-X-
Open HH:   ----X-------X---

Acid Bassline:

Notes: C-C-G-C-C-G-F-Eb
Use Accent on beats: 1, 5, 9, 13
Add Slides between: C to G, G to F

Experimentation Ideas

  1. Create a drum pattern, then switch to TB-303 and jam along
  2. Try extreme filter settings for wild sounds
  3. Use the same note but alternate Accent on/off
  4. Create polyrhythms with unexpected step patterns
  5. Record your performance using your computer's audio recorder

❓ Troubleshooting

No sound?

  • Click the "Click to Enable Audio" button
  • Check your computer's volume
  • Try refreshing the page
  • Check browser permissions for audio

Sounds choppy?

  • Close other tabs/applications
  • Reduce browser extensions
  • Try a different browser (Chrome works best)

Can't see all controls?

  • Zoom out in your browser (Ctrl/Cmd + -)
  • Scroll down to see more controls
  • Use landscape mode on mobile

🎓 Learn More

Want to dive deeper? Check out:

  • Full README.md for all features
  • CONTRIBUTING.md for development info
  • Watch tutorials on YouTube about TR-909 and TB-303
  • Listen to classic acid house and techno for inspiration

🎵 Have Fun!

Remember: There are no wrong notes in electronic music - only happy accidents! Experiment, explore, and most importantly, have fun making music.

Happy Music Making! 🎉