본문으로 건너뛰기
cccskills
무료GitHub에 공개

webaudio-guide

Step-by-step guide for building Web Audio processing pipelines — AudioWorklet processors, custom nodes, parameter automation, and WebMIDI integration. Use when the user asks how to build or wire up Web Audio code from scratch. Trigger on phrases like "build an AudioWorklet", "create a custom Web Audio effect", "how do I use WebMIDI", "how do I write an AudioWorkletProcessor", or "how do I connect AudioNodes".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills
설치 방법 보기

포함된 파일(1)

  • SKILL.md3.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Web Audio Processing Guide

Step 1 — Set up AudioContext and load worklet module

  • Create AudioContext inside a user gesture handler (click, keydown) to satisfy autoplay policy.
  • Call await audioContext.audioWorklet.addModule('path/to/processor.js') before creating nodes.
  • The module path is resolved relative to the page; bundlers may require special config (e.g. Vite's ?worker&url import).
  • Check audioContext.state and call audioContext.resume() if it is 'suspended'.

Step 2 — Write the AudioWorkletProcessor

  • Subclass AudioWorkletProcessor in a separate file; call registerProcessor('name', Class) at module scope.
  • Implement process(inputs, outputs, parameters) — inputs[n][channel] and outputs[n][channel] are Float32Array views for the current render quantum. Use .length in loops instead of hardcoding 128.
  • Pre-allocate all working buffers in constructor(); never create objects or arrays inside process().
  • Declare custom AudioParams via static get parameterDescriptors() returning an array of { name, defaultValue, minValue, maxValue, automationRate } descriptors.
  • Return true from process() to keep the processor alive; false or no return shuts it down.

Step 3 — Wire up the node graph

  • Instantiate the node on the main thread: new AudioWorkletNode(ctx, 'name', options).
  • Use node.connect(destination) and source.connect(node) to build the signal path; AudioContext.destination is the hardware output.
  • Access AudioParams via node.parameters.get('paramName') — set .value for immediate changes.
  • Schedule smooth automation with .linearRampToValueAtTime(), .setTargetAtTime(), or .setValueCurveAtTime() on the AudioParam.
  • Tear down cleanly: node.disconnect(), then source.stop(), then audioContext.close().

Step 4 — Worklet ↔ main thread communication

  • Use this.port.postMessage() / node.port.onmessage for low-frequency control (meters, state changes, error reporting).
  • Batch postMessage calls; avoid sending one per render quantum (currently ~344/sec at 44.1 kHz with 128-frame quanta).
  • For high-frequency or low-latency control (e.g. live gain, pitch), share a SharedArrayBuffer and read/write integer views with Atomics.load() / Atomics.store(). Scale floats to integers or bit-cast through a private buffer; Atomics does not operate on Float32Array.
  • Cross-origin isolation (COOP: same-origin + COEP: require-corp response headers) is required for SharedArrayBuffer.

Step 5 — WebMIDI integration

  • Request access with await navigator.requestMIDIAccess({ sysex: false }); handle the MIDIAccess object on success.
  • Enumerate inputs via midiAccess.inputs.forEach(input => ...) and attach input.onmidimessage = handler.
  • Parse the MIDIMessageEvent.data byte array: data[0] & 0xF0 = status (0x90 = note on, 0xB0 = CC, 0xE0 = pitch bend), data[1] = note/CC number, data[2] = velocity/value.
  • Map MIDI values to AudioParam targets: normalize 7-bit CC (0–127) to your parameter range and write via .setTargetAtTime() or a SharedArrayBuffer cell for real-time feel.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

au-review

무료

Reviews AudioUnit v2/v3 plugin implementations for spec compliance, thread safety, and correctness. Use when the user asks to review an AudioUnit plugin, check an AUv3 app extension, audit property or parameter handling, or asks "is my AUComponent thread-safe?" or "why does my AU crash in Logic?". Trigger on phrases like "review my AudioUnit", "check my AUv3", "is my render block safe?", or when you see AURenderCallback, internalRenderBlock, kAudioUnitProperty_*, or AUAudioUnit in the code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

audio-artifacts-debug

무료

Systematic checklist for diagnosing audio artifacts. Use when the user describes a sound quality problem — clicks, pops, crackling, silence, DC offset, aliasing, phase issues, or latency problems. Trigger on phrases like "why do I hear clicks?", "my output has DC offset", "there's aliasing in my oscillator", "phase is wrong in mono", "dropout when CPU spikes". Pairs with audio-dsp-review (realtime safety) and audio-numerics-review (numeric correctness) — use those to fix once the cause is found.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

audio-dsp-review

무료

Reviews audio DSP and audio processing code for realtime safety violations. Use whenever the user asks to review, audit, or check audio processing code — including plugin process callbacks, audio engine render functions, DSP implementations, or any code that runs on the audio thread. Trigger on phrases like "review my processBlock", "check this DSP code", "is this safe for the audio thread?", "review my JUCE plugin", or when you see an audio callback and spot potential realtime violations. Flag issues proactively even when the user hasn't explicitly asked for a review.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

audio-math-explainer

무료

Explains DSP math concepts to developers who need the theory behind an algorithm. Use whenever the user asks how a signal-processing concept works, wants intuition behind a formula, or hits a math-shaped bug. Trigger on phrases like "how does a Fourier transform work", "explain z-transforms", "what is convolution", "why does my biquad ring", "what is windowing for", "what causes aliasing", or "how do I convert gain to dB". Also trigger when the user pastes DSP code and asks why it behaves a certain way.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

audio-numerics-review

무료

Reviews audio DSP code for numerical correctness. Use when the user asks to review, audit, or check DSP code for correctness issues — filters, feedback loops, fixed-point arithmetic, accumulation loops, or any numeric computation in audio code. Trigger on "check this filter for NaN", "why does my reverb blow up?", "is this numerically stable?", "why do I hear DC in my output?". Pairs with audio-dsp-review (realtime safety); this skill covers numeric correctness. Flag issues proactively.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

audio-performance-debug

무료

Profiling strategy for audio CPU issues — xruns, spikes, and buffer underruns. Use when the user reports CPU overload, audio glitches under load, or performance regressions. Trigger on phrases like "I'm getting xruns", "my plugin causes CPU spikes", "dropouts under high voice count", "audio thread is too slow", "how do I profile my DSP". References audio-numerics-review for denormal slowdown and audio-dsp-review for lock contention.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

kunitoki/sonic-skills222026년 5월 21일 업데이트

kunitoki의 스킬 모두 보기

이 스킬의 문제 신고