# WebMusic > Music interaction toolkit: Web Components, Headless objects, and API + UI composition. Source snapshot 1377617e9c9a1f153606135c04f6d9fbfecee6cd8b42698c3e9042a51a83b2ba: @webmusic/kernel@0.1.0, @webmusic/ui@0.1.0, @webmusic/score@0.1.0, @webmusic/audio@0.1.0, @webmusic/bridge@0.1.0. Includes Audio/Bridge additions; package version labels do not establish published compatibility. Match this source checkout's exports and declarations. The manifest retains the exact comparison with the unchanged main release baseline. Documentation revision 82bd1e410be200e9c5fe745bab18f9dab31e43c4c3237acf649d401a6b7a2b1a. Start with this index to locate a task, then fetch its linked Markdown reference. Select Web Components for ready-made controls, Headless for custom UI, or API + UI for explicit bindings. Interactive demo controls are linked; static examples and reference tables are preserved. ## Choose a context file - [llms-full.txt](https://koperative-lab.github.io/WebMusic/llms-full.txt): All public documentation in one file. - [llms-components.txt](https://koperative-lab.github.io/WebMusic/llms-components.txt): Web Component, Headless and UI presenter references. - [llms-patterns.txt](https://koperative-lab.github.io/WebMusic/llms-patterns.txt): Focused setup, composition, playback-following, React, styling and I/O patterns. - [Context manifest](https://koperative-lab.github.io/WebMusic/agent-context/manifest.json): Release, content checksums, pages and bundle membership. - [Component catalog](https://koperative-lab.github.io/WebMusic/agent-context/catalog.json): Stable query IDs and verified documentation/source paths for the Skill scripts. ## Start here and choose an integration - [@webmusic/audio](https://koperative-lab.github.io/WebMusic/agent-context/audio/api/index.md): The thin, DOM-free Audio root — immutable AudioClip model, regions, beat grid, peaks types, a typed event emitter, and JSON serialization. - [@webmusic/audio/react](https://koperative-lab.github.io/WebMusic/agent-context/audio/api/react.md): React hooks and components for Audio - [Audio Web Components](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/index.md): Every drop-in Audio element by capability — what each tag is for, how the groups compose, the registration entries and the shared theming variables. - [Audio Headless](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/index.md): UI-free Audio transports, analysis sessions, projections and helpers — the purpose of each /headless entry, the reference page that owns every exported value, and explicit resource and time roles. - [Audio](https://koperative-lab.github.io/WebMusic/agent-context/audio/index.md): Digital audio — decoding, playback, projection and MIR analysis: what each Audio capability covers, how to install it, and a walkthrough from file to sound to screen. - [Introduction](https://koperative-lab.github.io/WebMusic/agent-context/index.md): Documentation for the five WebMusic packages — Score for notation, Audio for digital audio, the Bridge that syncs them, and the shared UI and kernel foundations. - [Quick Start](https://koperative-lab.github.io/WebMusic/agent-context/quick-start.md): Use WebMusic's npm packages to build a score player with synchronized notation and a three-octave piano keyboard. - [@webmusic/score](https://koperative-lab.github.io/WebMusic/agent-context/score/api/index.md): The thin, DOM-free Score root — immutable score model, primitives, time map, queries, events, and serialization. - [Score Web Components](https://koperative-lab.github.io/WebMusic/agent-context/score/element/index.md): Every drop-in Score element by capability — what each tag is for, how the groups compose, the registration entries and the shared theming variables. - [Score Headless](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/index.md): Code-only Score engines, state models and helpers — the purpose of each /headless entry and the reference page that owns every exported value. - [Score](https://koperative-lab.github.io/WebMusic/agent-context/score/index.md): Symbolic music — capabilities, installation, registration and public references for Score. ## Set up an AI coding agent - [AGENTS.md](https://koperative-lab.github.io/WebMusic/agent-context/agent-toolkit/agents-md.md): Copy WebMusic guidance into your application’s AGENTS.md. - [Agent Toolkit](https://koperative-lab.github.io/WebMusic/agent-context/agent-toolkit/index.md): Use WebMusic public references and project instructions to develop music applications with an AI agent. - [llms.txt](https://koperative-lab.github.io/WebMusic/agent-context/agent-toolkit/llms-txt.md): Download WebMusic documentation by task: a reference index, full documentation, components, or common patterns. - [Skills](https://koperative-lab.github.io/WebMusic/agent-context/agent-toolkit/skills.md): Install the WebMusic application-development skill and use it in your own project. ## Analyze audio and follow playback - [@webmusic/audio/analyze](https://koperative-lab.github.io/WebMusic/agent-context/audio/api/analyze.md): Audio analysis — peaks, loudness, spectrogram, onsets, key, tempo, pitch and Meyda features, plus an incremental session, a Web Worker, and audio→score transcription. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/analyze/audio-level-analyzer.md): Inspect sampled RMS, sample peak, crest and a peak threshold from a live audio graph. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/analyze/audio-meter.md): Monitor normalized RMS level or FFT bars from a player, borrowed analyser or transparent audio tap. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/analyze/audio-oscilloscope.md): Inspect a trigger-aligned live waveform window with timebase, freeze and time-amplitude probing. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/analyze/audio-spectrum-analyzer.md): Probe a live log-frequency FFT spectrum, freeze a frame and hold peaks. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/analyze/audio-transient-analyzer.md): Inspect live attack cues with sensitivity, a refractory interval, freeze and clear controls. - [createAudioAnalysisSession](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/analyze/audio-analysis-session.md): A memoized analysis over a clip that survives edits: sample-local tasks reuse cached frames over the untouched head and tail. - [createRealtimeAnalyzer](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/analyze/realtime-analyzer.md): Sample a borrowed AnalyserNode for level, spectrum or time-domain frames, and derive approximate live transient cues. ## Play audio, record and mix - [@webmusic/audio/play](https://koperative-lab.github.io/WebMusic/agent-context/audio/api/play.md): Audio playback and I/O — decode and load (WAV/MP3/FLAC/Ogg/Opus/AAC…), the dual-engine AudioClipPlayer, the AudioPlaylist queue, the AudioMixer, the AudioRecorder, a composable Effect chain, offline WAV export, and an off-main-thread decode worker. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/play/audio-mixer.md): A mixer companion for audio-player, with master/member volume, mute and solo. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/play/audio-player.md): Central play/pause, seek and time controls for a selected audio clip, playlist or mix. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/play/audio-playlist.md): A queue: play an ordered set of clips one after another, with auto-advance, previous/next/select, list loop and prefetch of the next entry — all through one shared AudioContext. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/play/audio-recorder.md): A record button with a live level bar — opens the microphone, captures the take into an AudioClip, and dispatches it on stop via webaudio:recorded. - [AudioClipPlayer](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/audio-clip-player.md): Single-clip transport over a buffer or a media element, with regions, a beat grid, looping and a metering tap. - [AudioMixer](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/audio-mixer.md): Coordinates clip/player starts and per-member volume, solo, mute and effect construction. - [AudioPlayer](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/audio-player.md): A stable playback owner over a replaceable clip or borrowed queue/mix transport. - [AudioPlaylist](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/audio-playlist.md): Ordered entries played in sequence on one shared context, prefetching the next while the current one plays. - [AudioRecorder](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/audio-recorder.md): Microphone capture into an AudioClip, with a live level, a device selection and hard retention caps. - [Effect](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/effects.md): The effect builders and the two graph helpers: describe a chain as data, then let a player or the exporter wire it. - [BufferEngine and MediaEngine](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/play/engines.md): Buffer and host-adapted media engines for low-level audio transport. ## Display audio waveforms and spectral data - [@webmusic/audio/view](https://koperative-lab.github.io/WebMusic/agent-context/audio/api/view.md): Audio visualization — retained visualizers, fitted overview and live-frame helpers, Headless view models/controllers, structural bindings, virtualization and colormaps. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/view/audio-live-view.md): A scrolling projection of a live AnalyserNode — waveform or spectrogram — with the newest column pinned to the right edge and history sliding left. - [](https://koperative-lab.github.io/WebMusic/agent-context/audio/element/view/audio-view.md): The Audio projection stage — one element and three drawings under a type attribute: a min/max waveform, an STFT spectrogram heatmap and a live level meter, on one geometry model. - [AudioMeterController](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/view/audio-meter.md): Read live level and spectrum frames from a borrowed analyser or an owned transparent tap. - [AudioTimeline](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/view/audio-timeline.md): Zoom, offset, playhead and hit testing for an audio view — the geometry every waveform and spectrogram surface shares, with nothing drawn. - [LiveViewController and LiveScrollBuffer](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/view/live-projection.md): Caller-paced analyser projection and fixed-capacity timestamped column storage, without a renderer or scheduler. - [computeClipPeaks and peaksDuration](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/view/peaks.md): computeClipPeaks and peaksDuration: the compact min/max pyramid a waveform reads instead of the samples. - [WaveformViewModel and SpectrogramViewModel](https://koperative-lab.github.io/WebMusic/agent-context/audio/headless/view/view-models.md): Project AudioPeaks or SpectrogramData through a caller-controlled timeline into visible columns and frames. ## Coordinate Score and Audio - [@webmusic/bridge](https://koperative-lab.github.io/WebMusic/agent-context/bridge/api.md): Every root export of the bridge: timeline conversion, offline score rendering, the role adapters, transcription assembly, and the sync object documented under Headless. - [Playback composition](https://koperative-lab.github.io/WebMusic/agent-context/bridge/composition.md): Load once, coordinate Score and Audio, and attach views without creating another transport. - [Headless](https://koperative-lab.github.io/WebMusic/agent-context/bridge/headless/index.md): The code-only objects @webmusic/bridge exports, and the rules every one of them follows. - [ScoreAudioSync](https://koperative-lab.github.io/WebMusic/agent-context/bridge/headless/score-audio-sync.md): The stateful transport that coordinates a score player and a clip player using a shared AudioContext reference and group commands, correcting drift as it goes. - [Bridge](https://koperative-lab.github.io/WebMusic/agent-context/bridge/index.md): The only package allowed to import both families: what @webmusic/bridge is for, the rule that defines it, and where its sync object and stateless functions are documented. ## Use domain-neutral state and timing primitives - [@webmusic/kernel](https://koperative-lab.github.io/WebMusic/agent-context/kernel/api.md): The ten kernel entries — events, element, worker, audio-context, player, effect, meter, transport, tick and sync — and the contracts each one carries. - [Kernel](https://koperative-lab.github.io/WebMusic/agent-context/kernel/index.md): Domain-neutral contracts and runtime utilities for Score, Audio, Bridge and custom integrations. ## Analyze harmony and follow playback - [@webmusic/score/analyze](https://koperative-lab.github.io/WebMusic/agent-context/score/api/analyze.md): Score analysis — stateless algorithms, code-only sessions and live trackers, plus styled analysis Web Components. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/analyze/score-chord-analysis.md): A seekable chord lane with selected-passage analysis data. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/analyze/score-live-chord-analysis.md): A current-chord nameplate driven by the selected player’s sounding notes. - [createAnalysisFollower](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/analyze/analysis-follower.md): Analysis, current position and held-note state borrowed from a playback source, with explicit navigation outcomes. - [createAnalysisSession](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/analyze/analysis-session.md): An analysis session over an immutable score, reusing identity-keyed caches across edits. - [Live trackers](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/analyze/live-trackers.md): createLiveChordTracker and createLiveKeyTracker: name the chord sounding now, and estimate a key from what has been heard — from note events alone, with no score. - [@webmusic/ui/analysis](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/analysis.md): Analysis cards, summaries, distributions, timelines, and playhead-follow rendering helpers. - [@webmusic/ui/harmony](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/harmony.md): A conveyor, a nameplate, a ranked strip and a wheel: read-outs that show a harmonic analysis happening rather than listing what it concluded. - [@webmusic/ui/level-analyzer](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/level-analyzer.md): A sampled dBFS level inspector with RMS and peak history, threshold, freeze, and hold reset. - [@webmusic/ui/oscilloscope](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/oscilloscope.md): An inspectable time-domain waveform with caller-supplied trace, trigger state and time-amplitude probe commands. - [@webmusic/ui/pitch](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/pitch.md): Live keyboard, staff and fretboard read-outs that press, spell and slide with the pitches a caller hands them. - [@webmusic/ui/spectrum-analyzer](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/spectrum-analyzer.md): An inspectable log-frequency spectrum with a probe, freeze, and peak hold over caller-supplied dB bins. - [@webmusic/ui/transient-analyzer](https://koperative-lab.github.io/WebMusic/agent-context/uikit/views-analysis/transient-analyzer.md): Present caller-supplied attack strength and hit history with sensitivity, freeze and clear actions. ## Load, parse and export music - [@webmusic/score/io](https://koperative-lab.github.io/WebMusic/agent-context/score/api/io.md): MIDI, MusicXML, MXL and ABC import/export for Score. ## Play music, control time and capture input - [@webmusic/score/play](https://koperative-lab.github.io/WebMusic/agent-context/score/api/play.md): Score playback — Web Components, push and pull engines, Sound timbres, effects, racks, offline WAV rendering, recording, and input drivers. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/play/score-note-input.md): Play notes from piano, grid, chord or QWERTY surfaces through one shared note-event contract. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/play/score-player.md): The Score transport widget — play/pause and a draggable seek bar over a file, an assigned Score, a whole Rack, or a controller you already own. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/play/score-rack-control.md): Mixer element for a shared Rack — a master fader plus per-member volume faders, re-rendering whenever members are added or removed. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/play/score-recorder.md): Capture note events as a Score, replay the completed take, and export MIDI or MusicXML. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/play/score-synth-panel.md): One control panel for every knob and curve surface — the sections attribute picks sound, effects, envelope, eq, lfo and macros, in order. - [AbPlayer](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/ab-player.md): Live arrangement switching between two sources on one transport. - [Effect](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/effect.md): The post-processing chain: describe an effect as data, and let a player or the offline renderer wire it. - [InteractivePlayer](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/interactive-player.md): The pull engine: notes sound as you send them, so a keyboard or a sequencer drives the timing. - [LoopPlayer](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/loop-player.md): A ready-made A–B loop over a score region. - [Metronome](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/metronome.md): A beat clock with tap-tempo, independent of any score. - [PlayerController](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/player-controller.md): An event-driven transport controller over a ScorePlayer. - [Rack](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/rack.md): Many instruments under one transport, so an ensemble starts, stops and seeks as a unit. - [ScorePlayer](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/score-player.md): The push engine: hand it a Score and a timbre and it schedules and plays the whole piece on its own clock. - [Sound](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/play/sound.md): The timbre namespace — oscillator, FM, wavetable, noise, samplers and the optional SF2 and Tone backends behind one shape. - [@webmusic/ui/meter](https://koperative-lab.github.io/WebMusic/agent-context/uikit/mixing-capture/meter.md): Renders a level or spectrum meter by pulling normalized samples from a structural binding. - [@webmusic/ui/mixer](https://koperative-lab.github.io/WebMusic/agent-context/uikit/mixing-capture/mixer.md): Renders master and channel faders and routes level, mute, solo, and optional transport commands through a structural binding. - [@webmusic/ui/recorder](https://koperative-lab.github.io/WebMusic/agent-context/uikit/mixing-capture/recorder.md): Renders record, optional playback and export actions, input level, and take status from caller-owned capture state. - [@webmusic/ui/minimap](https://koperative-lab.github.io/WebMusic/agent-context/uikit/transport-time/minimap.md): A DPR-aware overview canvas with an accessible draggable and keyboard-operable range brush. - [@webmusic/ui/playlist](https://koperative-lab.github.io/WebMusic/agent-context/uikit/transport-time/playlist.md): Playlist transport, track selection, seeking, and per-entry state in one presenter. - [@webmusic/ui/timeline](https://koperative-lab.github.io/WebMusic/agent-context/uikit/transport-time/timeline.md): A domain-neutral ruler with ticks, regions, markers, loops, selection, playhead, and seeking. - [@webmusic/ui/track-list](https://koperative-lab.github.io/WebMusic/agent-context/uikit/transport-time/track-list.md): An accessible selectable index with roving focus and one current row. - [@webmusic/ui/transport](https://koperative-lab.github.io/WebMusic/agent-context/uikit/transport-time/transport.md): Renders play, pause, seek, and elapsed-time UI over a structural transport binding. ## Compose a React application - [@webmusic/score/react](https://koperative-lab.github.io/WebMusic/agent-context/score/api/react.md): React provider, hooks, controls, and score views ## Display scores, pitches and application state - [@webmusic/score/view](https://koperative-lab.github.io/WebMusic/agent-context/score/api/view.md): Score visualization — stateless layout APIs, code-only view and navigation models, explicit SVG/OSMD renderers, and three styled Web Components. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/view/score-pitch-view.md): Current sounding pitches as a keyboard, staff or fretboard, selected by type. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/view/score-sheet-view.md): Real engraved sheet music via the optional OpenSheetMusicDisplay peer — beams, ties, slurs and page layout, with an optional playback cursor. - [](https://koperative-lab.github.io/WebMusic/agent-context/score/element/view/score-view.md): One score, five views: piano roll, staff, waterfall, navigation map or static thumbnail. - [createPitchView](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/view/pitch-view.md): Held-pitch state with optional playback attachment for application-owned keyboard, staff and fretboard views. - [createScoreMapView](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/view/score-map-view.md): Whole-score map state and quarter-note navigation with optional borrowed playback. - [createScoreView](https://koperative-lab.github.io/WebMusic/agent-context/score/headless/view/score-view.md): A code-only view model over a Score: which notes are visible, which are sounding, and where the playhead is — with no surface of its own. - [@webmusic/ui/panel](https://koperative-lab.github.io/WebMusic/agent-context/uikit/layout-feedback/panel.md): Creates a labelled section-and-slot skeleton for composing specialized presenters. - [@webmusic/ui/stage](https://koperative-lab.github.io/WebMusic/agent-context/uikit/layout-feedback/stage.md): Generic retained and canvas render hosts with DPR, resize, animation, status, and surface-slider support. - [@webmusic/ui/status](https://koperative-lab.github.io/WebMusic/agent-context/uikit/layout-feedback/status.md): Shared ready, loading, empty, and error feedback with live-region semantics. - [@webmusic/ui/workbench](https://koperative-lab.github.io/WebMusic/agent-context/uikit/layout-feedback/workbench.md): The shell an analysis view sits in: an optional tablist, a stage, a rail of docks and a status bar, plus the one reading of the clock per frame that everything mounted inside it shares. - [@webmusic/ui/note](https://koperative-lab.github.io/WebMusic/agent-context/uikit/notes/note.md): Renders piano, grid, or chord surfaces and optionally owns pointer, chord, and QWERTY note-hold interaction. ## Build and theme custom UI - [@webmusic/ui](https://koperative-lab.github.io/WebMusic/agent-context/uikit/api.md): The @webmusic/ui root: the twenty-five published presenter entries, their shared contracts and deliberate differences, and the release boundary. - [Catalog](https://koperative-lab.github.io/WebMusic/agent-context/uikit/catalog.md): Browse the twenty-one @webmusic/ui presenters by UI function, and see which Element composes which. - [UI Kit](https://koperative-lab.github.io/WebMusic/agent-context/uikit/index.md): Independent, accessible DOM presenters for application-owned music state and WebMusic components. - [@webmusic/ui/envelope](https://koperative-lab.github.io/WebMusic/agent-context/uikit/parameters-gestures/envelope.md): Renders an ADSR curve with synchronized pointer and native-range interaction over a structural binding. - [@webmusic/ui/eq](https://koperative-lab.github.io/WebMusic/agent-context/uikit/parameters-gestures/eq.md): Renders an equalizer response curve with draggable band controls over caller-owned graph state. - [@webmusic/ui/lfo](https://koperative-lab.github.io/WebMusic/agent-context/uikit/parameters-gestures/lfo.md): Renders run, shape, rate, depth and live-phase waveform controls over caller-owned LFO state. - [@webmusic/ui/macro](https://koperative-lab.github.io/WebMusic/agent-context/uikit/parameters-gestures/macro.md): Renders one normalized macro control or a compound rack of macros over structural bindings. - [@webmusic/ui/parameter](https://koperative-lab.github.io/WebMusic/agent-context/uikit/parameters-gestures/parameter.md): Renders a flat or grouped rotary parameter rack over caller-owned parameter state.