Sử dụng dữ liệu nhị phân (binary/blob) làm src cho audio/video/img trong HTML5

Khi file media (audio, video, image) lưu trong database hoặc tạo động ở client, có thể dùng Data URL (base64) hoặc Object URL (blob:) làm src.

1. Data URL (Base64)

Nhúng trực tiếp dữ liệu vào attribute src.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBA..." width="30" height="25" alt="My Image">
<audio src="data:audio/mp3;base64,//uQxAA..." controls></audio>

• Ưu: Đơn giản, không cần server, hoạt động offline.
• Nhược: Kích thước tăng ~33% (base64 overhead), block main thread khi parse chuỗi lớn, không cache được riêng.

2. Object URL (Blob URL) - Khuyên dùng cho file lớn

Tạo URL trỏ đến Blob/File trong bộ nhớ trình duyệt.

// Từ Blob/File object
var blob = new Blob([binaryData], { type: 'audio/mp3' });
var url = URL.createObjectURL(blob);
audioElement.src = url;

// Sau khi không dùng nữa, thu hồi để giải phóng bộ nhớ
URL.revokeObjectURL(url);

• Ưu: Không overhead base64, hiệu năng tốt, hỗ trợ stream/seek.
• Nhược: URL chỉ tồn tại trong session trang, revoke khi xong.

Ví dụ: Load audio từ sessionStorage/base64

// Giả sử base64 string lưu trong sessionStorage
var base64 = sessionStorage.getItem('userMusicBase64');
if (base64) {
  // Chuyển base64 -> Blob
  var byteChars = atob(base64.split(',')[1]);
  var byteNumbers = new Array(byteChars.length);
  for (var i = 0; i < byteChars.length; i++) byteNumbers[i] = byteChars.charCodeAt(i);
  var byteArray = new Uint8Array(byteNumbers);
  var blob = new Blob([byteArray], { type: 'audio/mp3' });
  
  // Tạo Object URL
  var url = URL.createObjectURL(blob);
  document.getElementById('audioPlayer').src = url;
}

Ưu tiên Object URL cho media lớn, Data URL cho icon nhỏ, inline CSS.