> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sampler.meiji.industries/llms.txt
> Use this file to discover all available pages before exploring further.

# Chirp

> Chirp Turntablism technique, defaults, and preview examples.

export const TurntablismPlayer = ({diagramUrl, diagramAlt, ahhUrl, freshUrl, ahhLabel, freshLabel, plotBounds, diagramDurationSeconds, techniqueDurationSeconds}) => {
  const cycleProgress = currentTime => {
    if (currentTime >= techniqueDurationSeconds) return 1;
    return currentTime % diagramDurationSeconds / diagramDurationSeconds;
  };
  const createTurntablismPlayerController = ({requestFrame, cancelFrame, updateProgress, setActiveSource}) => {
    let activeAudio = null;
    let animationFrame = null;
    const stopAnimation = () => {
      if (animationFrame !== null) {
        cancelFrame(animationFrame);
        animationFrame = null;
      }
    };
    const animate = audio => {
      if (audio !== activeAudio) return;
      updateProgress(audio);
      if (!audio.paused && !audio.ended) {
        animationFrame = requestFrame(() => animate(audio));
      }
    };
    return {
      handlePlay(source, audio, otherAudio) {
        activeAudio = audio;
        if (otherAudio && !otherAudio.paused) otherAudio.pause();
        stopAnimation();
        setActiveSource(source);
        animationFrame = requestFrame(() => animate(audio));
      },
      handlePause(audio) {
        if (audio !== activeAudio) return;
        stopAnimation();
        updateProgress(audio);
        activeAudio = null;
        setActiveSource(null);
      },
      handleProgress(audio) {
        if (activeAudio === null || audio === activeAudio) updateProgress(audio);
      },
      stopAnimation
    };
  };
  const ahhRef = useRef(null);
  const freshRef = useRef(null);
  const playerRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [activeSource, setActiveSource] = useState(null);
  const updateProgress = audio => {
    if (!audio || !Number.isFinite(diagramDurationSeconds) || diagramDurationSeconds <= 0 || !Number.isFinite(techniqueDurationSeconds) || techniqueDurationSeconds <= 0) {
      return;
    }
    setProgress(Math.min(1, Math.max(0, cycleProgress(audio.currentTime))));
  };
  if (!playerRef.current) {
    playerRef.current = createTurntablismPlayerController({
      requestFrame: callback => requestAnimationFrame(callback),
      cancelFrame: frame => cancelAnimationFrame(frame),
      updateProgress,
      setActiveSource
    });
  }
  const handlePlay = (source, audio) => {
    const other = source === "ahh" ? freshRef.current : ahhRef.current;
    playerRef.current.handlePlay(source, audio, other);
  };
  const handlePause = audio => {
    playerRef.current.handlePause(audio);
  };
  useEffect(() => () => playerRef.current.stopAnimation(), []);
  const playheadPercent = (plotBounds.left + progress * (plotBounds.right - plotBounds.left)) * 100;
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-gray-200 dark:border-white/15">
      <div className="relative bg-[#101820]">
        <img src={diagramUrl} alt={diagramAlt} className="block h-auto w-full" />
        <div aria-hidden="true" className="pointer-events-none absolute top-[16%] bottom-[19%] w-0.5 bg-fuchsia-300 shadow-[0_0_8px_rgba(244,114,182,0.9)]" style={{
    left: `${playheadPercent}%`
  }} />
      </div>
      <p className="px-4 pt-3 text-sm text-gray-600 dark:text-gray-300" aria-live="polite">
        {activeSource ? `Playing ${activeSource}. The playhead restarts with each scratch cycle and holds at the end during release.` : "Choose either source to audition the notation."}
      </p>
      <div className="grid gap-4 p-4 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor={`${ahhUrl}-audio`}>
            ahh.wav
          </label>
          <audio id={`${ahhUrl}-audio`} ref={ahhRef} controls preload="none" aria-label={ahhLabel} className="w-full" onPlay={event => handlePlay("ahh", event.currentTarget)} onPause={event => handlePause(event.currentTarget)} onEnded={event => handlePause(event.currentTarget)} onTimeUpdate={event => playerRef.current.handleProgress(event.currentTarget)} onSeeking={event => playerRef.current.handleProgress(event.currentTarget)} onSeeked={event => playerRef.current.handleProgress(event.currentTarget)} onLoadedMetadata={event => playerRef.current.handleProgress(event.currentTarget)}>
            <source src={ahhUrl} type="audio/wav" />
            Your browser cannot play this audio inline. <a href={ahhUrl}>Open ahh.wav</a>.
          </audio>
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor={`${freshUrl}-audio`}>
            fresh.wav
          </label>
          <audio id={`${freshUrl}-audio`} ref={freshRef} controls preload="none" aria-label={freshLabel} className="w-full" onPlay={event => handlePlay("fresh", event.currentTarget)} onPause={event => handlePause(event.currentTarget)} onEnded={event => handlePause(event.currentTarget)} onTimeUpdate={event => playerRef.current.handleProgress(event.currentTarget)} onSeeking={event => playerRef.current.handleProgress(event.currentTarget)} onSeeked={event => playerRef.current.handleProgress(event.currentTarget)} onLoadedMetadata={event => playerRef.current.handleProgress(event.currentTarget)}>
            <source src={freshUrl} type="audio/wav" />
            Your browser cannot play this audio inline. <a href={freshUrl}>Open fresh.wav</a>.
          </audio>
        </div>
      </div>
    </div>;
};

# Chirp

A one-tone forward stroke whose direction change is cut by the fader, leaving a bright chirp instead of a full pull-back.

Default division 1/4, Pattern Chirp, Rate 8th, Gate Straight, Swing 0, Humanize 10%.

Use it for sharp fills, turnarounds, and short rhythmic punctuation.

**Lineage:** The Forward and Military kin patterns connect this family to G.W. Theodore, Grandmaster Flash, and classic drill vocabulary.

## Preview presets

### 1 — Chirp

**Effective controls:** Pattern `Chirp` · Motion `Forward` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

This is the catalog default preview.

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_chirp/1-chirp/diagram.svg" diagramAlt="TTM diagram for Chirp preview Chirp: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_chirp/1-chirp/ahh.wav" freshUrl="/assets/turntablism/scratch_chirp/1-chirp/fresh.wav" ahhLabel="ahh.wav playable example for Chirp preview Chirp" freshLabel="fresh.wav playable example for Chirp preview Chirp" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.6666666666666666} techniqueDurationSeconds={2.6666666666666665} />

### 2 — 1/2 Cycle

**Effective controls:** Pattern `Chirp` · Motion `Forward` · Division `1/2` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Division → 1/2

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_chirp/2-1-2-cycle/diagram.svg" diagramAlt="TTM diagram for Chirp preview 1/2 Cycle: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_chirp/2-1-2-cycle/ahh.wav" freshUrl="/assets/turntablism/scratch_chirp/2-1-2-cycle/fresh.wav" ahhLabel="ahh.wav playable example for Chirp preview 1/2 Cycle" freshLabel="fresh.wav playable example for Chirp preview 1/2 Cycle" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={1.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 3 — 1/8 Cycle

**Effective controls:** Pattern `Chirp` · Motion `Forward` · Division `1/8` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Division → 1/8

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_chirp/3-1-8-cycle/diagram.svg" diagramAlt="TTM diagram for Chirp preview 1/8 Cycle: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_chirp/3-1-8-cycle/ahh.wav" freshUrl="/assets/turntablism/scratch_chirp/3-1-8-cycle/fresh.wav" ahhLabel="ahh.wav playable example for Chirp preview 1/8 Cycle" freshLabel="fresh.wav playable example for Chirp preview 1/8 Cycle" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 4 — Forward

**Effective controls:** Pattern `Forward` · Motion `Forward` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Pattern → Forward

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_chirp/4-forward/diagram.svg" diagramAlt="TTM diagram for Chirp preview Forward: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_chirp/4-forward/ahh.wav" freshUrl="/assets/turntablism/scratch_chirp/4-forward/fresh.wav" ahhLabel="ahh.wav playable example for Chirp preview Forward" freshLabel="fresh.wav playable example for Chirp preview Forward" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.6666666666666666} techniqueDurationSeconds={2.6666666666666665} />

### 5 — Military

**Effective controls:** Pattern `Military` · Motion `Forward` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Pattern → Military

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_chirp/5-military/diagram.svg" diagramAlt="TTM diagram for Chirp preview Military: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_chirp/5-military/ahh.wav" freshUrl="/assets/turntablism/scratch_chirp/5-military/fresh.wav" ahhLabel="ahh.wav playable example for Chirp preview Military" freshLabel="fresh.wav playable example for Chirp preview Military" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={1.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />