Đồng bộ hoá âm thanh và video phát trên web

Web Audio API giúp bạn có thể đồng bộ hoá AV một cách chính xác.

François Beaufort

Thuộc tính outputLatency của thực thể AudioContext ước tính độ trễ đầu ra của phần cứng âm thanh (ví dụ: độ trễ của tai nghe Bluetooth hoặc giao diện âm thanh USB bên ngoài). Thuộc tính này rất hữu ích khi bạn muốn:

• Đồng bộ hoá nội dung âm thanh hiện có với nội dung mới được ghi âm. (trong tình huống sản xuất âm nhạc)
• Đồng bộ hoá đầu ra Âm thanh web với nội dung nghe nhìn khác (ví dụ: phát video hoặc MIDI).

Trong bản minh hoạ WebCodecs này (nguồn), WebCodecs API được dùng để giải mã MediaStream thành dữ liệu âm thanh và video thô, sau đó phát lại vào phần tử HTML <canvas> có dữ liệu âm thanh đến từ Audio Worklet. Thuộc tính outputLatency cho phép bản minh hoạ xác định thời điểm một dấu thời gian âm thanh nhất định truyền đến tai người dùng, sau đó vẽ khung hình video đúng cách cho phù hợp với dấu thời gian đó.

Hãy tự mình trải nghiệm, phát video bằng tai nghe Bluetooth mà bạn yêu thích (Xuất hiện ) rồi chờ chim (🐦) (xem ở trên) và bật/tắt hộp đánh dấu (☑️) để quan sát những thay đổi về chế độ phát âm thanh. Tổng giá trị độ trễ đầu ra được cập nhật theo thời gian thực.

Độ trễ đầu ra AudioContext

Hình ảnh chính của Wahid Khene trên Unsplash.