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

API Web âm thanh giúp bạn có thể thực hiện đồng bộ hóa AV đúng cách.

François Beaufort

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

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

Trong bản minh hoạ WebCodecs (nguồn) này, API WebCodecs được dùng để giải mã MediaStream thành dữ liệu video và âm thanh thô, sau đó phát lại vào phần tử HTML <canvas> có dữ liệu âm thanh đến từ Worklet âm thanh. 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 khớp với dấu thời gian đó.

Hãy dùng thử, phát video bằng tai nghe Bluetooth mà bạn yêu thích (joe), đợi chú chim (🐦) (xem ở trên) và bật/tắt hộp đánh dấu (☑️) để quan sát các thay đổi đối với tính năng 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ỗ trợ trình duyệt

• 102
• 102
• 70
• x

Nguồn

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