Communitygithub.com

heygen-com/hyperframes(超帧音频)

HyperFrames 音频技能:在 Web 音频上下文中,通过 `data-fx-chain`、`data-automation` 等属性,以混合关系(而非处理器堆叠)的方式,控制音频效果、自动化、旁白闪避雕刻,并确保预览与渲染一致。

hyperframes(超帧音频) 是什么?

HyperFrames 音频技能是一种专注于 Web 音频混合的专业工具,其核心理念是:混音是一组轨道间的关系,而非处理器堆叠。它支持在音频/视频元素上通过 `data-fx-chain`(效果链)、`data-automation`(自动化包络)和 `data-fx-carve`(旁白闪避雕刻)三个属性进行声明式配置。该技能提供了增益、均衡器、压缩器、限制器、门限、饱和、延迟、混响、合唱、相位器和比特粉碎等效果家族。特别值得一提的是其“旁白雕刻”功能,它通过分析音频信号中的频段关系,智能地动态闪避背景音乐,而不是简单粗暴地降低整个音轨音量。它适用于 HyperFrames 插件环境或独立安装,支持在浏览器内进行实时预览和离线渲染,确保所见即所得。该技能提供了丰富的诊断工具和预设,帮助用户通过频谱分析而非主观听感来定位音频问题。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-audio

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

插件安装: 在执行设置或刷新命令前,当此技能位于 HyperFrames 插件内时,请遵循 插件执行规则。独立安装时,请保留下面的更新说明。

HyperFrames 音频(HyperFrames Audio)

混音是一组关系,而非处理器堆叠。两段单独听都很出色的音轨,放在一起可能变得难以入耳,解决之道几乎从不是“调低其中一段”——而是找到它们在争夺什么,然后把它交给更需要的那一段。这里的每一个工具都是为了表达这些关系之一而存在的。

效果位于元素上的 data-fx-chain 属性中,预览和渲染使用同一个 Web Audio 图——在实时上下文中是工作室,在离线上下文中则是浏览器内部已经驱动的引擎。每个效果只有一种实现,因此你在拖拽时听到的内容,就是最终被写入的内容。你永远不需要重复调整。

剪辑时间属于 /hyperframes-core:音频/视频的裁剪和源范围使用 data-start、data-duration 和 data-media-start,交叉淡变重叠不同轨道的剪辑。本技能负责已放置轨道的淡入/淡出、交叉淡变包络、轨道增益/轨道音量、音量和效果自动化、闪避/旁白雕刻以及效果链。/media-use 负责素材源、生成和预处理。

常数 data-playback-rate(0.1..10)在匹配的音频/视频元素使用相同的时间、源偏移和速率时,对画面和音高保持的音频是渲染安全的。速度斜坡是 data-automation 中的一个 rate 通道(参见 docs/reference/speed-ramps);它覆盖常数,并在预览和渲染中保持音高。HyperFrames 不提供自动波形同步或漂移校正。 有关可复制的剪切/交叉淡变/重定时配方,请使用 /hyperframes-core → references/creator-editing-recipes.md。

三个属性承载所有内容,它们位于音频/视频元素本身——或者,对于前两个属性,位于一个 <hf-audio-group> 总线上(参见“多轨道的单总线”):

属性包含内容
data-fx-chain效果,按信号顺序排列
data-automation此轨道音量或其效果参数的包络
data-fx-carve雕刻本身的设置,以便可以重新推导

出厂效果家族包括:增益、EQ(高通、低通、峰值、搁架)、压缩器、限制器、门限、饱和、延迟、混响、合唱、相位器和比特粉碎。

每种效果的精确 JSON 格式,以及通道必须满足的规则:references/attributes.md。 每个效果及其参数、范围和单位:references/fx-registry.md。 如何解决你无法听到的音频文件的问题:references/diagnosis.md。 预设、命名任务和单旋钮配置文件,以及症状到修复对照表:references/presets.md——在手动构建效果链之前请阅读此文件,因为其中一个预设或命名任务通常已经指出了问题所在。

整体工作原理

两个创作界面写入这些属性;两个运行时通过相同的构建器读取它们。这个共享的中间层是预览能预测渲染的原因。

flowchart TB
  voice["旁白轨道<br/>媒体文件"]
  bed["音乐背景<br/>媒体文件"]

  subgraph AUTHOR["创作 —— 唯一写入属性的地方"]
    panel["工作室<br/>旁白雕刻控制"]
    script["scripts/carve.mjs<br/>检测配对,默认为动态"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["写入到背景元素上"]
    carveAttr["data-fx-carve<br/>源 · 强度 · 动态"]
    chainAttr["data-fx-chain<br/>峰值 xN + 增益,标记为 fromCarve"]
    autoAttr["data-automation<br/>每个雕刻参数一个通道"]
  end

  analysis --> carveAttr
  analysis --> chainAttr
  analysis --> autoAttr

  subgraph SHARED["单一实现,两者读取"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["预览<br/>实时 AudioContext<br/>attachElementFxChain"]
  sched --> preview
  build --> render["渲染<br/>无头浏览器中的 OfflineAudioContext<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["拖拽时听到的内容"]
  render --> wav["处理后的 WAV<br/>+ chainTailSeconds 确保混音允许尾部通过"]
  wav --> mix["引擎 · audioMixer<br/>音量通道已在此处烧入 PCM,不在图中"]
  mix --> out["渲染后的混音"]

  edit["播放中编辑属性"] -.->|MutationObserver| preview

雕刻自身的设置永远不会在回放时被读取——它产生的效果链和通道才是播放的内容。data-fx-carve 的存在是为了可以在现有雕刻上更改强度,而无需从滤波器中反向推导回来。

在被雕刻的背景中,信号先经过下潜部分,然后是电平匹配,最后是你自己构建的效果——这就是为什么你添加的限制器仍然充当最后的限幅器:

flowchart LR
  src["解码后的背景"] --> p1["峰值<br/>400 Hz"]
  p1 --> p2["峰值<br/>1 kHz"]
  p2 --> p3["峰值<br/>1.6 kHz"]
  p3 --> g["增益<br/>电平匹配"]
  g --> hand["你自己的效果<br/>例如 限制器"]
  hand --> dest["轨道增益,然后输出"]

  l1["通道 fx.n1.gain"] -.->|"旁白在该频段<br/>电平的包络"| p1
  l4["通道 fx.n4.gain"] -.->|"背景整体<br/>闪避的程度"| g

静态雕刻是完全相同的图,使用固定值并且没有任何通道。

首先,找出问题所在

下表从“听起来很轰隆”开始——这假设有人已经听过并指出了问题。当你拿到一个文件并被告知“修复它”,但你却没有这样的描述,也无法亲自听,那么你必须通过测量来解决。一条规则支配着一切:

无法诊断单个未知语音的绝对频谱。 共振峰差异为 ±10 dB,基频范围在 85–255 Hz,句子结尾处会衰减 5–6 dB。 这些特征单独看来都像是缺陷,但每一个都来自说话者本身。

因此,你需要进行比较,并且要对比同一文件内部的信号:如果存在干净的原版,就用原版对比;否则,对比静音间隙——间隙中任何可听到的东西都是叠加的,间隙的频谱就是通道而不是语音。与公开的平均频谱或合成的控制语音进行比较是无效的:两个说话者之间的差异比大多数缺陷的差异都大,本指南背后的评估中得出的两个错误答案正是来自这种方法。

当没有原版也没有可用的静音时,静态音调缺陷确实是欠定的。此时应说明情况并提供符合的读数,而不是挑选一个并在此基础上构建效果链。

命令、陷阱和实用配方:references/diagnosis.md。在诊断一个无人描述过的文件之前请阅读它。

从症状入手

一旦你知道了频段和类型,就能指出音频的问题所在。大多数糟糕的音频都属于以下一两种,并且每种都有出厂解决方案:

听起来像 ...使用 ...
底部的嗡嗡声或砰砰声rumble-cut,或 80 Hz 的 highpass
轰隆、胸腔共鸣抑制轰隆感 任务 (200 Hz)
闷、像隔着纸板减少模糊 任务 (250 Hz)
听不清单词增加清晰度 任务 (3 kHz),或雕刻背景
刺耳、令人疲倦柔化刺耳感 任务 (3.2 kHz)
有些单词比其他单词响得多压缩器上的 均匀度,或均衡电平
句子间的房间混响room-gate
旁白和音乐冲突旁白雕刻 — 不是对任一方的 EQ
干、像在没地方录制的room-tight 或 room-natural
只是“业余”voice-clean,它按顺序包含了以上四种

完整的目录、每个预设包含的内容、频段词汇表,以及明确未涵盖的内容(去嘶声、降噪、音色匹配):references/presets.md。

先减后加,滤波后再调整电平,电平之后处理关系,最后考虑特性和限幅。每一步都会改变下一步听到的内容——在高通滤波器之前设置的压缩器会把时间浪费在追逐隆隆声上。

根据问题选择效果家族,而不是根据名称

滤波器(highpass、lowpass、peaking、lowshelf、highshelf)决定一个轨道允许占据哪些频率。这是处理两个音源冲突时的首选工具,因为冲突发生在频段中:背景音乐和旁白都想占据 1–3 kHz,从背景音乐中拿走这部分频段对背景音乐的损失远小于调低整个音轨对混音造成的损失。对人声进行高通滤波是解决隆隆声的标准方法;低通滤波则会人为地使声音变暗或变闷。

动态处理(gain、compressor、limiter、gate)决定一个轨道的电平随时间变化的行为。压缩缩小了响度与安静之间的差距,从而使安静部分可以提升。限制器是一个天花板——它不是塑造任何东西,它只是保证没有信号能超过它。门限移除低于阈值的内容,这就是你如何在短语之间消音房间混响的方法。gain 是一个简单的电平级,当轨道需要退让时,自动化通道就骑乘在这个增益之上。

非线性处理(saturate、bitcrush)改变波形的形状,这会增加原本不存在的谐波。当轨道需要个性或质感而非修正时使用它——请记住,它是生成性的:它使薄的音频源变得更密集,而不是更干净。

时间类效果(delay、reverb、chorus、phaser)将轨道置于一个空间或赋予其宽度。这些是最容易破坏混音的效果,因为尾部或失谐的副本会占据旁白所需的空间。将它们用于那些应该位于其他事物后面的轨道,并保持湿声量低于孤立听起来合理的水平。

效果链是串行的:每个效果处理前一个效果产生的结果。因此,修正性滤波放在前面,特性放在中间,限制器放在最后,这样才能真正起到限幅作用。

旁白雕刻

它解决的问题。 背景音乐下的旁白会使旁白难以听清。本能的反应是闪避整个背景音乐,这虽然有效,但会牺牲背景音乐的所有存在感——音乐在整个旁白期间会变得无力。但旁白并不需要整个频谱。它只需要它实际占据的那几个频段。雕刻只拿走这些频段,背景音乐保留其低频和高频,因此它仍然是音乐,而旁白也仍然清晰可辨。

它是一种关系,而不是一种效果。 设置位于被处理的轨道上——即背景音乐——并且它命名了要监听的旁白轨道,就像侧链压缩器一样:你选择变安静的轨道,并指定什么使它变安静。永远不要将雕刻放在旁白轨道上。 旁白与自身进行雕刻是一个错误,而不是一个微妙的混音选择。

针对所有旁白,而不是其中某一条。 sources 是一个列表,因为背景音乐通常贯穿整个序列——一个解说员、一个采访回答、第二个主持人。它们会在任何测量之前,按照背景音乐自己的时钟进行求和(mixCarveSources),因此一次分析就能涵盖所有旁白:频段来自所有存在的语音,并且包络在线任何旁白出现的地方都会上升。永远不会与背景音乐同时播放的旁白则不包含在内;它们不会遮蔽背景音乐。

针对多于一个剪辑 ID 进行雕刻是错误的。请将剪辑分组,然后针对组进行雕刻。 这是一个不变规则,而不是技巧。依次命名剪辑必须完全正确,并且只能在下一个编辑之前保持正确——之后添加的第四个解说剪辑将位于雕刻的感知范围之外,背景音乐将无法在其下无声地闪避。而命名组会在分析时解析成员关系,因此稍后添加到组中的剪辑无需更改 sources 即可被覆盖:

<!-- 将旁白分组,然后针对该组雕刻背景音乐 -->
<audio id="vo-intro" data-audio-group="voiceover" …></audio>
<audio id="vo-middle" data-audio-group="voiceover" …></audio>
<audio id="vo-outro" data-audio-group="voiceover" …></audio>

<audio id="music" data-fx-carve='{"enabled":true,"sources":["voiceover"],"strength":0.8}' …></audio>

一个命名了两个或更多普通剪辑 ID 而非组的 sources 列表会被 audio_carve_ungrouped_sources 规则捕获——它仍然可以工作,但当添加剪辑时,它会悄然失效。

保持雕刻组为旁白组:不包括背景音乐、SFX 或音乐。 sources 中的组 ID 会在每次分析时解析为所有当前成员,因此你命名的组就是你稍后得到的组——而不是写入时测量过的轨道。两种可能出问题的情况:

  • 背景音乐位于其自己的源组中。 它被作为旁白交给自己,并针对自身内容进行雕刻——“永远不要对一个轨道进行自身雕刻”这条规则在一次重新分析后就会触发。
  • 一个 SFX 或音乐剪辑位于旁白组中。 它会在下一次分析时进入侧链,背景音乐就会开始对一阵“嗖”声进行闪避,即使写入该属性的那次运行从未测量过它。

在雕刻被写入的那一刻,这两种情况都是不可见的:分析将其检测到的旁白求和,并且不会通过组解析进行往返,因此第一次通过是真正正确的,只有下一次才是错误的。因此,为每个角色分配其自己的组——music 用于背景音乐,voiceover 用于旁白,sfx 用于效果音——并确保 sources 中命名的组只包含旁白。

carve.mjs 在遇到任一情况时会拒绝写入组形式,转而记录剪辑 ID,并说明:

…

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相关技能