Ableton Learning Music: Play with beats

Source snapshot

The local route vendors the official Ableton lesson as one self-contained archive build instead of reauthoring it. The route keeps the published widget runtime and local sample-bank behavior while trimming the broader lesson shell.

• Live original verified against https://learningmusic.ableton.com/make-beats/play-with-beats.html on 2026-03-22.
• The public route intentionally strips the upstream header, feedback shell, cookie surfaces, and marketing chrome.
• Public provenance is limited to the shared footer with local canonical and og:url metadata.

Asset handoff

• ableton-learning-music-play-with-beats/index.html owns the local metadata shell, widget bootstrap, and footer wiring.
• shared/engineering-sandbox.css and shared/engineering-sandbox.js provide the local practice-shell onboarding, hint strip, and framed first lesson surface around the archived Ableton widgets.
• ableton-learning-music-play-with-beats/widgets/build/ preserves the published Ableton widget runtime under the route tree.
• ableton-learning-music-play-with-beats/lessons/sounds/ archives the shared local Ableton audio stack: 31 audio files.
• ableton-learning-music-play-with-beats/fonts/ archives the shared Learning Music typography stack: 9 font files.

Known deviations

• Export-to-Live remains neutralized in the archive build so the route does not expose a broken remote export path.
• Non-local lesson links in the published body are either rewritten to shipped local Ableton routes or reduced to plain text.
• The route keeps the shared footer as the only original-lesson reference surface.
• The Engineering Sandbox practice shell is framing-only here: it adds onboarding and first-surface emphasis without changing the underlying lesson widgets or audio boot path.

Validation guidance

• Keep the published widget runtime in place and prefer asset-path or shell cleanup over rewriting the lesson UI.
• Verify the practice hero renders before the first lesson surface and that the framed widget stack stays unobscured on desktop, tablet, and mobile widths.
• Music smoke should keep proving local script loading, transport or visible state changes, and zero remote playable media requests.
• Run node interactive-explanation/tools/check-public-surface.mjs, node interactive-explanation/tools/smoke-bundle.mjs --group music, and the full smoke bundle after route changes.