Communitygithub.com

HyperFrames 音訊

為 HyperFrames 影片編輯框架提供基於 Web Audio 的專業音訊處理,包含效果鏈、自動化、音量控制與旁白音頻雕刻,預覽即是最終渲染。

HyperFrames 音訊 是什麼?

HyperFrames Audio 是專為 HyperFrames 框架設計的音訊技能,提供一套完整的關係型音訊處理方案。它將混音視為頻率與動態關係的組合,而非處理器的堆疊,並在網頁瀏覽器中通過統一的 Web Audio API 實現預覽與渲染的一致性。該技能支援多種效果家族,包括濾波器(高通、低通、峰值)、動態處理(壓縮、限制、閘門)、非線性處理(飽和、位元壓碎)及時間效果(延遲、殘響、合唱、相位),所有效果皆透過元素的 `data-fx-chain`、`data-automation` 和 `data-fx-carve` 屬性進行設定。特別的是,其旁白雕刻(Voiceover Carve)功能能智慧地針對背景音樂中與人聲衝突的頻段進行衰減,而非簡單地降低整個音量,從而保留音樂的完整感。效果鏈為序列結構,預設會先進行校正性濾波,再處理動態與特性,最後才加入限制器作為上限。此技能支援 Claude Code、Cursor、Codex 等 AI 代理平台,開發者可透過自然語言描述音訊問題,讓代理自動生成對應的效果鏈或調整參數。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

外掛安裝: 在執行設定或更新命令前,如果此技能位於 HyperFrames 外掛內部,請遵循外掛安裝規則。獨立安裝則保留下方的更新說明。

HyperFrames 音訊 是做什麼的?

混音是一組關係,而非處理器的堆疊。兩條各自聽起來正常的音軌,放在一起可能無法入耳,而解決方案幾乎從不是「調低其中一條」——而是要找出它們在爭搶什麼,然後將其交給更需要的那一方。這裡的每個工具都是為了表達這些關係而存在。

效果存在於元素的 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雕刻自身的設定,以便日後重新推導

內建的效果系列包括:增益、均衡器(高通、低通、峰值、擱架)、壓縮器、限制器、閘門、飽和、延遲、殘響、合唱、相位器與位元壓碎。

每個效果的確切 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/>在無頭瀏覽器中離線 AudioContext<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
轟鳴、胸腔感過重Tame Boominess 任務(200 Hz)
模糊、像隔著紙板Reduce Mud 任務(250 Hz)
難以聽清字詞Add Clarity 任務(3 kHz),或雕刻背景音樂
刺耳、令人疲憊Soften Harshness 任務(3.2 kHz)
某些字詞比其他字詞大聲很多對壓縮器使用 Evenness,或 Even Out Levels
句子之間有空間殘響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 靜態規則捕獲——它仍然可以運作,但這是那種在添加一個片段時會默默失效的版本。

保持雕刻群組為人聲群組:不包含背景音樂、音效或音樂。 sources 中的群組 ID 在_每次_分析時都會解析為_當時_的_所有_成員,因此你命名的群組就是你在之後獲得的群組——而不是在撰寫時被測量的音軌。兩種可能出錯的情況:

  • 背景音樂在其自己的來源群組中。 它被當作人聲傳遞給自己,並根據自身內容進行雕刻——「永遠不要對音軌自身進行雕刻」的規則在重新分析後生效。
  • 音效或音樂片段在人聲群組中。 它在下一次分析時進入側鏈,背景音樂開始在「咻」聲下閃避,即使撰寫該屬性的那次運行從未測量過它。

在撰寫雕刻時,這兩種情況都是不可見的:分析會對它偵測到的聲音進行加總,並且不會通過群組解析進行往返驗證,因此第一次運行實際上是正確的,只有下一次才是錯誤的。因此,請為每個角色分配自己的群組——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]

相關技能