Buttons that play drums when you tap them — or press a key.
Welcome to Studio! Every web page is made of three languages. HTML says what's on the page, CSS says how it looks, and JavaScript says what it does.
Open index.html and add a button under the heading: <button id="kick">Kick</button>. The id is its name, so your code can find it.
Press ▶ Run to see it in the preview.
💡 Who uses this? Every app you tap starts like this: HTML for what's on the screen, CSS for how it looks, and JavaScript for what happens when you touch it. Front-end developers build exactly this, all day.
index.html is what's on the page, style.css is how it looks, app.js is what it does (the frontend), and server.py is your Python backend. It keeps running between requests, and anything in the store dictionary is saved even after a reload.
rb.play("kick")Play one drum right now. rb.play("snare", 2) plays two quick hits.rb.playBeat({ kick: [1, 5], snare: [3, 7] })Loop a whole beat, like the course's drum commands. [3, 2] means beat 3 with 2 hits. Add a tempo: rb.playBeat(beat, 120).rb.stop()Stop the beat.await rb.server({ action: "save" })Send a request to your server.py's handle(request) and wait for its answer.rb.saveBeat({ kick: [1, 5] })Open a beat in RockBlocks, in a new tab.rb.msPerBeat(120)How many milliseconds one beat lasts at that tempo — handy for setInterval.Drums: crash, ride, openhat, hihat, hightom, tom, lowtom, rimshot, snare, kick
console.log() and your server's print() show up here.