用途：该工作流示例展示如何用 Helios 构建一个播客可视化作品。它围绕“多轨音频混合 + 基于 DOM 的时间同步”展开，适合制作音频响应式的可视化合成内容。
主要能力：
- DOM 中的音频混合：Helios 渲染器（dom 模式）会自动发现 DOM 中的 <audio> 与 <video> 元素，并将其混合进最终视频。只要元素存在于 DOM 中即参与。
- 属性支持：src 指定音频源；loop 存在时循环播放；muted 存在时该音频被排除在混合之外（可用于仅做分析的轨道）。volume 目前不支持作为混合属性（默认 1.0），如需精确音量控制应使用渲染器的 audioTracks 选项或直接烘焙进音频文件。
- 时间控制：用 data-helios-offset 控制音频相对时间轴的起播点。正偏移（如 5）表示延迟 5 秒开始；负偏移（如 -5）表示立即播放，但从音频文件的第 5 秒处开始（seek）。
- 视觉同步：通过 helios.subscribe 订阅 currentFrame 与 fps，计算 time = currentFrame / fps，据此触发或驱动可视化动画。音频由浏览器/渲染器处理，可视化只需与预期时间对齐。
使用方式（示例代码）： <audio src="music.mp3" loop data-helios-offset="0"></audio> <audio src="voice.wav" data-helios-offset="2"></audio> <audio src="sfx.wav" muted></audio>
const helios = new Helios({ duration: 60, fps: 30, autoSyncAnimations: true // DOM 音频同步所需 });
helios.subscribe((state) => { const time = state.currentFrame / state.fps; if (time >= 2) { showVoiceVisualizer(); } });
适用场景：制作播客节目可视化、音频响应式动画合成，需要将背景音乐、旁白、音效等多轨组合并按时间轴触发画面变化的场合。
限制与注意事项：
- 浏览器预览（Studio/Player）中，标准 <audio> 元素不会自动应用 data-helios-offset；DomDriver 会尝试同步，但偏移的精确起停行为可能与逐帧精确的渲染器不同。如需完美预览同步，可在 subscribe 循环中用自定义逻辑对音频元素执行 play()/pause()，或依赖渲染器验证结果。
- 需确保音频格式（MP3、WAV、AAC）同时被浏览器与 FFmpeg 支持。
- volume 不支持作为混合属性，默认 1.0。
参考：示例位于 examples/podcast-visualizer/；渲染器实现位于 packages/renderer/src/strategies/DomStrategy.ts。