08/10/2026 · VietTechies · Biên tập
Lập trình viên Bryan Hamilton đã chia sẻ giải pháp tạo tính năng xem trước âm thanh tức thì khi di chuột và bộ trực quan hóa tần số bằng JavaScript thuần cùng các tính năng có sẵn trên trình duyệt. Được phát triển cho nền tảng lịch trình biểu diễn trực tiếp The DJ Calendar, kỹ thuật này loại bỏ chi phí từ các framework bên ngoài cũng như các thư viện xử lý âm thanh cồng kềnh nhờ kết hợp API tìm kiếm công khai của iTunes với Web Audio API.
Lấy dữ liệu bản nghe thử và xử lý thông tin
Quy trình phát âm thanh nghe thử bắt đầu bằng một lệnh gọi đến API tìm kiếm iTunes không yêu cầu xác thực. Khi người dùng di chuột qua thẻ nghệ sĩ lần đầu tiên, hệ thống sẽ gửi truy vấn để lấy URL đoạn âm thanh nghe thử dài 30 giây. Đường dẫn nghe thử và tên bài hát nhận về sẽ được lưu tạm (cache) trực tiếp vào các thuộc tính dữ liệu DOM. Những lần di chuột sau đó sẽ đọc dữ liệu từ thuộc tính cục bộ này, giúp bỏ qua hoàn toàn các yêu cầu mạng không cần thiết.
Nếu không tìm thấy bản nghe thử, phần tử sẽ được gán một thẻ dữ liệu đánh dấu việc tra cứu thất bại. Điều này ngăn trình duyệt thực hiện các yêu cầu mạng lặp đi lặp lại và thất bại trong những lần di chuột tiếp theo.
Phân tích tần số theo thời gian thực với Web Audio API
Thay vì phụ thuộc vào hiệu ứng hoạt ảnh CSS mang tính trang trí, bộ trực quan hóa sẽ đọc dữ liệu phổ tần số thực tế thông qua node phân tích (analyser node) của AudioContext. Việc thiết lập cấu hình fftSize bằng 64 sẽ tạo ra 32 nhóm tần số riêng biệt. Bằng cách lấy mẫu từ mỗi nhóm tần số cách quãng, vòng lặp dựng hình sẽ cập nhật dữ liệu cho bộ chỉnh âm (equalizer) gồm 8 cột trên canvas dựa trên mảng đệm Uint8Array.
Do nguồn âm thanh bắt nguồn từ mạng phân phối nội dung (CDN) công khai của Apple, nhà phát triển bắt buộc phải gán thuộc tính crossOrigin thành anonymous cho phần tử âm thanh. Nếu không có quyền truy cập nguồn liên kết (cross-origin), mô hình bảo mật của trình duyệt sẽ hạn chế việc phân tích tần số, khiến node phân tích trả về toàn bộ dữ liệu bằng không.
Xử lý tranh chấp dữ liệu và tối ưu khả năng truy cập
Hành vi di chuyển con trỏ nhanh qua nhiều phần tử liên tiếp có thể kích hoạt các thao tác bất đồng bộ chồng chéo. Để quản lý vấn đề này, mỗi tương tác sẽ tăng một bộ đếm thế hệ (generation counter) được gắn trên phần tử DOM. Các hàm gọi lại (callback) sẽ kiểm tra bộ đếm này trước khi thay đổi trạng thái, đồng thời hủy bỏ các yêu cầu đã cũ bất cứ khi nào sự kiện di chuột mới hơn được kích hoạt.
Giải pháp này cũng tính đến khả năng của thiết bị và thiết lập đa phương tiện của người dùng. Trên các thiết bị cảm ứng, sự kiện di chuột sẽ bị tắt, cho phép thao tác chạm của người dùng bật/tắt phát lại một cách rõ ràng và đáp ứng chính sách tự động phát âm thanh của trình duyệt. Đối với các hệ thống bật truy vấn media giảm chuyển động (reduced-motion), tính năng xem trước khi di chuột sẽ được bỏ qua hoàn toàn.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn: Building a Real Audio Hover Preview with Zero Dependencies