25:["$","title",null,{"children":"How to make a beat! | Ria's Workspace | Observable"}] 49:T6caf,beatmaker = { const container = html`

🎵 Beat Maker

Build your beat step-by-step

Click to start making beats

Step 1

🎸 Bass Line

Sets the rhythm and outlines the chord progression

Step 2

🥁 Drums

Main rhythm elements: kick, snare, and hi-hats

Kick Drum

Snare

Hi-Hat

Step 3

🎹 Melodic Elements

Rounds out the beat with harmonic content

Step 4

✨ Fill the Gaps

Extra sounds and foley for sonic interest

`; const initBtn = container.querySelector('#init'); const initContainer = container.querySelector('#init-container'); const controlsDiv = container.querySelector('#controls'); const playBtn = container.querySelector('#play'); const optionBtns = container.querySelectorAll('.option-btn'); let players = {}; let sequence; let isPlaying = false; const activeOptions = { bass: null, kick: null, snare: null, hihat: null, melody: null, fx: null }; // Sound definitions for each option const createPlayers = () => { return { // Bass variations bass_sub: new Tone.Synth({ oscillator: { type: 'sine' }, envelope: { attack: 0.01, decay: 0.3, sustain: 0.4, release: 0.8 } }).toDestination(), bass_808: new Tone.MembraneSynth({ pitchDecay: 0.15, octaves: 6, oscillator: { type: 'sine' }, envelope: { attack: 0.001, decay: 0.7, sustain: 0.1, release: 1.8 } }).toDestination(), bass_synth: new Tone.Synth({ oscillator: { type: 'sawtooth' }, envelope: { attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.5 }, filter: { frequency: 400 } }).toDestination(), // Kick variations kick_hard: new Tone.MembraneSynth({ pitchDecay: 0.02, octaves: 10, oscillator: { type: 'sine' }, envelope: { attack: 0.001, decay: 0.3, sustain: 0, release: 0.3 } }).toDestination(), kick_soft: new Tone.MembraneSynth({ pitchDecay: 0.05, octaves: 6, oscillator: { type: 'sine' }, envelope: { attack: 0.001, decay: 0.4, sustain: 0.01, release: 1.4 } }).toDestination(), kick_punchy: new Tone.MembraneSynth({ pitchDecay: 0.03, octaves: 8, oscillator: { type: 'sine' }, envelope: { attack: 0.0001, decay: 0.2, sustain: 0, release: 0.2 } }).toDestination(), // Snare variations snare_crisp: new Tone.NoiseSynth({ noise: { type: 'white' }, envelope: { attack: 0.001, decay: 0.15, sustain: 0 } }).toDestination(), snare_clap: new Tone.NoiseSynth({ noise: { type: 'pink' }, envelope: { attack: 0.001, decay: 0.1, sustain: 0, release: 0.1 } }).toDestination(), snare_rimshot: new Tone.MetalSynth({ frequency: 400, envelope: { attack: 0.001, decay: 0.08, release: 0.05 }, harmonicity: 8, modulationIndex: 20, resonance: 3000, octaves: 0.5 }).toDestination(), // Hi-hat variations hihat_closed: new Tone.MetalSynth({ frequency: 200, envelope: { attack: 0.001, decay: 0.08, release: 0.01 }, harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5 }).toDestination(), hihat_open: new Tone.MetalSynth({ frequency: 200, envelope: { attack: 0.001, decay: 0.3, release: 0.2 }, harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5 }).toDestination(), hihat_shaker: new Tone.NoiseSynth({ noise: { type: 'white' }, envelope: { attack: 0.001, decay: 0.05, sustain: 0.02, release: 0.05 } }).toDestination(), // Melody variations melody_pluck: new Tone.PluckSynth({ attackNoise: 1, dampening: 4000, resonance: 0.7 }).toDestination(), melody_pad: new Tone.PolySynth(Tone.Synth, { oscillator: { type: 'triangle' }, envelope: { attack: 0.5, decay: 0.3, sustain: 0.8, release: 2 } }).toDestination(), melody_lead: new Tone.Synth({ oscillator: { type: 'square' }, envelope: { attack: 0.01, decay: 0.1, sustain: 0.5, release: 0.3 } }).toDestination(), melody_bell: new Tone.MetalSynth({ frequency: 200, envelope: { attack: 0.001, decay: 1.4, sustain: 0.2, release: 1.4 }, harmonicity: 8, modulationIndex: 2, resonance: 4000, octaves: 1.5 }).toDestination(), melody_marimba: new Tone.Synth({ oscillator: { type: 'sine' }, envelope: { attack: 0.001, decay: 0.3, sustain: 0.1, release: 0.8 } }).toDestination(), melody_organ: new Tone.PolySynth(Tone.Synth, { oscillator: { type: 'sine' }, envelope: { attack: 0.02, decay: 0.1, sustain: 0.9, release: 0.5 } }).toDestination(), // FX variations fx_riser: new Tone.NoiseSynth({ noise: { type: 'white' }, envelope: { attack: 1.5, decay: 0.3, sustain: 0.5, release: 0.5 } }).toDestination(), fx_perc: new Tone.MembraneSynth({ pitchDecay: 0.01, octaves: 3, oscillator: { type: 'triangle' }, envelope: { attack: 0.001, decay: 0.15, sustain: 0, release: 0.1 } }).toDestination(), fx_ambient: new Tone.PolySynth(Tone.Synth, { oscillator: { type: 'triangle' }, envelope: { attack: 2, decay: 1, sustain: 0.8, release: 3 } }).toDestination() }; }; // Initialize audio initBtn.onclick = async () => { await Tone.start(); players = createPlayers(); // Create sequence sequence = new Tone.Sequence((time, step) => { // Bass (plays on beats 0 and 2) if (activeOptions.bass && (step === 0 || step === 2)) { const bassPlayer = players[`bass_${activeOptions.bass}`]; if (bassPlayer) { bassPlayer.triggerAttackRelease('A1', '8n', time); } } // Kick (plays on beats 0 and 2) if (activeOptions.kick && (step === 0 || step === 2)) { const kickPlayer = players[`kick_${activeOptions.kick}`]; if (kickPlayer) { kickPlayer.triggerAttackRelease('C1', '8n', time); } } // Snare (plays on beats 1 and 3) if (activeOptions.snare && (step === 1 || step === 3)) { const snarePlayer = players[`snare_${activeOptions.snare}`]; if (snarePlayer) { snarePlayer.triggerAttackRelease('8n', time); } } // Hi-hat (plays on every beat) if (activeOptions.hihat) { const hihatPlayer = players[`hihat_${activeOptions.hihat}`]; if (hihatPlayer) { hihatPlayer.triggerAttackRelease('16n', time); } } // Melody (plays on beats 0, 1, 2) if (activeOptions.melody && step !== 3) { const melodyPlayer = players[`melody_${activeOptions.melody}`]; if (melodyPlayer) { const notes = ['E4', 'G4', 'A4']; melodyPlayer.triggerAttackRelease(notes[step], '8n', time); } } // FX (plays occasionally) if (activeOptions.fx) { const fxPlayer = players[`fx_${activeOptions.fx}`]; if (fxPlayer && activeOptions.fx === 'riser' && step === 0) { // White noise riser - builds tension fxPlayer.triggerAttackRelease('2n', time); } else if (fxPlayer && activeOptions.fx === 'perc' && (step === 1 || step === 3)) { // Wood block on offbeats fxPlayer.triggerAttackRelease('G5', '32n', time); } else if (fxPlayer && activeOptions.fx === 'ambient' && step === 0) { // Atmospheric pad chord fxPlayer.triggerAttackRelease(['C4', 'E4', 'G4'], '1m', time); } } }, [0, 1, 2, 3], '4n').start(0); Tone.Transport.start(); isPlaying = true; playBtn.textContent = '⏸ Pause'; initContainer.style.display = 'none'; controlsDiv.style.display = 'block'; }; // Option button clicks optionBtns.forEach(btn => { btn.onmouseenter = () => { if (!activeOptions[btn.dataset.layer] || activeOptions[btn.dataset.layer] !== btn.dataset.option) { btn.style.transform = 'translateY(-2px)'; btn.style.boxShadow = '0 5px 15px rgba(102, 126, 234, 0.3)'; } }; btn.onmouseleave = () => { if (!activeOptions[btn.dataset.layer] || activeOptions[btn.dataset.layer] !== btn.dataset.option) { btn.style.transform = 'translateY(0)'; btn.style.boxShadow = 'none'; } }; btn.onclick = () => { const layer = btn.dataset.layer; const option = btn.dataset.option; // Deselect all buttons in this layer container.querySelectorAll(`[data-layer="${layer}"]`).forEach(b => { b.style.background = 'rgba(255, 255, 255, 0.05)'; b.style.borderColor = 'rgba(255, 255, 255, 0.1)'; b.style.transform = 'translateY(0)'; b.style.boxShadow = 'none'; }); // Toggle selection if (activeOptions[layer] === option) { activeOptions[layer] = null; } else { activeOptions[layer] = option; btn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; btn.style.borderColor = '#667eea'; btn.style.transform = 'translateY(-2px)'; btn.style.boxShadow = '0 8px 20px rgba(102, 126, 234, 0.5)'; } }; }); // Play/pause button playBtn.onclick = () => { if (isPlaying) { Tone.Transport.pause(); playBtn.textContent = '▶ Play Beat'; playBtn.style.background = 'linear-gradient(135deg, #48bb78 0%, #38a169 100%)'; } else { Tone.Transport.start(); playBtn.textContent = '⏸ Pause'; playBtn.style.background = 'linear-gradient(135deg, #f56565 0%, #e53e3e 100%)'; } isPlaying = !isPlaying; }; playBtn.onmouseenter = () => { playBtn.style.transform = 'scale(1.05)'; }; playBtn.onmouseleave = () => { playBtn.style.transform = 'scale(1)'; }; return container; }4a:[] 29:{"id":"fee008dfba3bf287","slug":null,"title":"How to make a beat!","thumbnail":"109866072d3b860e704836382fb9fd0aed424a32b0d9695a9aaa03070cc18745","access_level":"public","create_time":"$D2025-11-17T16:30:55.041Z","update_time":"$D2025-11-17T17:09:47.626Z","view_time":null,"first_public_time":"$D2025-11-17T17:06:00.221Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2b5375050d24be0e","login":"rias-workspace","name":"Ria's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/625b2ab9e833e82431ada22dc823571398dab6bd5a726b6bdf76f563514fb59d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":57,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fffe1dd62c7bde51","login":"ria-patil","name":"Ria Patil","avatar_url":"https://avatars-next.observableusercontent.com/afc684ed232d8cd70ea5c19d2a7d630b8621e6ef2b529f6ecb9fbd4cef80118a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fffe1dd62c7bde51","login":"ria-patil","name":"Ria Patil","avatar_url":"https://avatars-next.observableusercontent.com/afc684ed232d8cd70ea5c19d2a7d630b8621e6ef2b529f6ecb9fbd4cef80118a","tier":null,"role":"editor"},{"type":"team","id":"2b5375050d24be0e","login":"rias-workspace","name":"Ria's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/625b2ab9e833e82431ada22dc823571398dab6bd5a726b6bdf76f563514fb59d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to make a beat!","cells":[{"id":0,"value":"# How to make a beat!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"### Step 1: Choose a Bass Line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"Before you start with the technical details of creating a song, be sure to choose the vibe of the song you are going for!\n\nThe bass is the foundation of your beat.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"### Step 2: Add Some Drums","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"Drums are the heartbeat of your track.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"### Step 3: Queue in a Melody","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"Melodies make your beat memorable and emotional.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"### Step 4: Fill the Gaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"These finishing touches add character and polish your beat.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Tone = require(\"tone@14.8.49\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$49","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null