Hiển thị phổ tần số và dạng sóng theo thời gian thực bằng phân tích FFT ngay trên trình duyệt.
Features
- Phổ tần số thời gian thực: Hiển thị phổ FFT với 256-2048 bin tùy chỉnh, giúp phát hiện tần số trội, tiếng ồn nền và hài âm trong khi bản thu đang phát.
- Waveform động chi tiết: Quan sát biên độ chuẩn hóa với đường chuẩn clipping, hỗ trợ zoom và chuyển đổi giữa chế độ mono/stereo.
- Điều chỉnh trực quan: Thay đổi kích thước FFT, smoothing, phạm vi tần số hiển thị và màu sắc biểu đồ để phù hợp môi trường studio hoặc lớp học.
- Phân tích đa nguồn: Hỗ trợ Tệp MP3/WAV/OGG/M4A và nguồn micro trực tiếp, giúp so sánh bản thu và tín hiệu live ngay lập tức.
Use Cases
- Sản xuất âm nhạc và kiểm soát mix: Trong giai đoạn mix/master hãy giám sát phổ tần để nhận ra cộng hưởng, dồn bass, sibilance hay clipping trước khi chốt EQ và compressor.
- Âm thanh live và cân chỉnh âm học: Phát tone kiểm tra hoặc bản tham chiếu để ghi lại phản hồi PA, tạo hồ sơ âm học cho từng sân khấu và chỉnh Lọc/crossover nhanh chóng.
- Phân tích giọng nói, broadcast, podcast: Đánh giá dải giọng (≈100 Hz–8 kHz), mức noise floor và sự đồng đều loudness cho podcast, tổng đài hoặc livestream.
- Giảng dạy STEM và demo tương tác: Trình diễn FFT, hài âm và hiệu ứng Lọc trong lớp học/ workshop để học viên trực quan hóa các khái niệm âm học.
Usage Guide
- Tải Tệp: Chọn Tệp âm thanh cần phân tích.
- Điều chỉnh hiển thị: Chọn chế độ phổ, dạng sóng và tinh chỉnh FFT.
- Phát & quan sát: Nhấn phát để xem phổ tần số và dạng sóng động.
Technical Details
Biến đổi Fourier nhanh trong Web Audio
FFT chuyển tín hiệu miền thời gian thành các bin tần số rời rạc. Với kích thước FFT 2048-4096, độ phân giải tần số đạt 21-10 Hz/bin ở sample rate 44.1 kHz. AnalyserNode cung cấp mảng 8-bit tuyến tính giúp vẽ phổ nhanh, trong khi smoothingTimeConstant (0-0.99) xác định mức làm mượt giữa các khung hình.
Phân tích dạng sóng và biên độ
Dữ liệu thời gian từ getByteTimeDomainData() biểu diễn biên độ chuẩn hóa 0-255. Khi hiển thị, cần chuyển đổi về dải -1 đến 1 để nhận biết clipping. Việc kết hợp phổ và waveform cho phép theo dõi động lực học, pha và nhịp điệu của bản thu.
Đồ thị AudioContext và hiệu suất
Pipeline tiêu chuẩn: AudioContext → MediaElementSource → AnalyserNode → GainNode → Destination. Sử dụng requestAnimationFrame đồng bộ với refresh rate để vẽ Canvas, đồng thời giải phóng buffer khi đổi bài để tránh rò rỉ bộ nhớ. Với Tệp lớn nên stream bằng fetch + decodeAudioData theo chunk.
Frequently Asked Questions
- FFT hoạt động thế nào trong phân tích âm thanh?
- FFT chuyển tín hiệu thời gian thành phổ tần, giúp thấy rõ tần số và biên độ. Kích thước FFT càng lớn thì độ phân giải tần số càng cao nhưng tốc độ cập nhật giảm, cần cân bằng theo nhu cầu hiển thị.
- Khác biệt giữa hiển thị phổ và dạng sóng?
- Dạng sóng hiển thị biên độ theo thời gian, giúp quan sát dynamics và clipping; phổ tần cho biết dải tần đang xuất hiện, hữu ích để phân tích EQ, tiếng ồn và hài âm.
- Định dạng nào được hỗ trợ, có giới hạn dung lượng không?
- Công cụ hỗ trợ MP3, WAV, OGG, M4A và xử lý hoàn toàn trên trình duyệt. Giới hạn phụ thuộc bộ nhớ trình duyệt; các Tệp nhạc dưới 100MB hoạt động tốt.
- Ứng dụng thực tế trong sản xuất âm nhạc?
- Giúp nhận diện tần số trội, phát hiện tiếng ồn, cân bằng EQ, kiểm tra clipping/distortion, phân tích hài âm và so sánh bản mix. Đây là công cụ quan trọng cho kỹ sư âm thanh và người học.
Related Documentation
- MDN - Web Audio API - Tổng quan đồ thị âm thanh, node và ví dụ visualization trong trình duyệt.
- MDN - AnalyserNode - Chi tiết thuộc tính FFT, smoothing, min/maxDecibels và cách đọc dữ liệu.
- Web Audio API Cookbook - Tập hợp mẫu xử lý, phân tích, hiển thị âm thanh nâng cao với JavaScript.
- W3C Web Audio Spec - Đặc tả chính thức Web Audio, cập nhật node, AudioWorklet và xử lý thời gian thực.
- MDN Visualization Guide - Hướng dẫn xây dựng visualizer FFT với Canvas và requestAnimationFrame.