用途:该工作流演示如何构建播客可视化,将多条音频轨道(如背景音乐、旁白)混合,并根据时间轴驱动画面。适用于构建音频反应式合成。
主要能力:基于 DOM 的音频混合——Helios Renderer(dom 模式)会自动发现 DOM 中的 audio 与 video 元素并混入最终视频;支持属性 src、loop、muted,volume 属性暂不支持用于混音(默认 1.0),需要精确音量可用 Renderer 的 audioTracks 选项。时间控制——通过 data-helios-offset 控制音频相对时间轴的起播点,正值延后起播,负值立即播放并从音频文件的对应秒数开始(Seek)。可视化同步——用 helios.subscribe 依据 currentFrame 驱动视觉元素,音频交由浏览器/Renderer 处理。
使用方式:在 DOM 中放置带 data-helios-offset 的 audio 元素;初始化 Helios 时设置 duration、fps 及 autoSyncAnimations: true(DOM 音频同步所需);在 subscribe 回调中用 currentFrame/fps 计算时间并触发可视化(如 time>=2 显示旁白可视化)。
限制:浏览器预览(Studio/Player)中 data-helios-offset 不会被标准 audio 元素自动应用,DomDriver 虽尝试同步,但偏移的精确启停可能与逐帧精确的 Renderer 不一致;如需完美预览同步,可能需在 subscribe 循环中自定义 play()/pause(),或依赖 Renderer 验证。音频格式需为浏览器与 FFmpeg 支持(MP3、WAV、AAC 等)。参考:示例 examples/podcast-visualizer/,渲染器 packages/renderer/src/strategies/DomStrategy.ts。