阶段 5 · 媒体基础基础20 分钟
媒体时间轴：不要把所有“时间”当成同一只钟
currentTime、performance.now、AudioContext.currentTime
并排观察页面时钟、媒体播放头与音频时钟，理解调度、展示和同步为何不能只靠 setInterval。
LEARNING GOALS
先明确本课目标
1
区分不同时间基准
2
理解时间更新事件的粒度
3
用媒体专用回调安排逐帧处理
MENTAL MODEL · 再建立心智模型
浏览器里同时挂着多只钟：页面钟用于测量，媒体钟跟随播放头，音频钟服务采样调度；同步是在这些钟之间做映射。
MINIMAL EXAMPLE
怎样避免把页面时间和媒体时间直接相减？
不同 API 的时间戳可能拥有不同起点和推进规则。同步前应在同一观测点记录两只钟的值，再用差值把目标时间映射到对应时间域。
javascriptconst pageAnchor = performance.now() / 1000;
const mediaAnchor = video.currentTime;
function mediaTimeAt(pageNow) {
return mediaAnchor + (pageNow / 1000 - pageAnchor);
}- 同时取锚点 尽可能在同一次任务中读取两个时间基准。
- 保留单位 performance.now 是毫秒，媒体 currentTime 通常是秒。
- 定期再校准 暂停、seek、播放速度变化都会让旧映射失效。
同步逻辑明确知道时间戳属于哪只钟，并能在状态变化后重新建立映射。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
性能Frame Pacing控制每帧提交与展示节奏，使 CPU、GPU 和刷新率协同，减少卡顿、排队过深或不均匀帧时间。音视频基础Media Timeline媒体播放头所在的时间轴，受暂停、定位、播放速度和缓冲状态影响，不等同于页面单调时钟。音视频原理Clock Drift两个独立硬件或软件时钟运行速率存在微小差异，时间越久累计偏差越大的现象。音视频基础currentTimeHTMLMediaElement 的当前媒体播放位置（秒）；写入它会触发定位，不应与 performance.now() 的页面单调时钟混用。音视频基础Page Clock由 performance.now() 提供的页面单调计时基准，适合测量经过时间；它不随媒体暂停或 Seek 改变。音视频基础AudioContext TimeAudioContext.currentTime 表示音频上下文从创建后推进的采样时间轴，用于精确安排节点启停和参数自动化。音视频基础requestVideoFrameCallback在新视频帧准备提交给合成器时回调应用的 HTMLVideoElement 方法，并提供媒体时间与呈现统计。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一个能标记丢帧和时钟漂移的迷你媒体监视器。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
setInterval 不是媒体时钟
定时器会受主线程负载和后台节流影响，适合更新普通 UI，不适合作为音频采样或视频帧同步的唯一依据。
选择离数据最近的时钟
音频参数应按 AudioContext 时间调度；视频逐帧处理优先跟随 requestVideoFrameCallback；进度条则读取 media.currentTime。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
UI 定时、媒体播放和采样调度属于三种不同精度的问题。
WebGL
专用音频时钟和视频帧回调贴近实际数据处理，适合同步与逐帧工作。
WebGPU
媒体元素提供播放头和媒体事件，适合进度、定位与播放状态界面。
同步逻辑要显式记录时间基准，避免直接混用不同来源的秒数。