HTML5 Web Audio spectrum analyzer (FFT)

FFT (Fast Fourier Transform) là một thuật toán hiệu quả để tính biến đổi Fourier rời rạc (DFT) và biến đổi ngược. Ứng dụng trong bài viết này dùng để hiển thị phổ của âm thanh.

Một số ví dụ hiển thị spectrum dạng visualization:

• http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

Để có thể hiển thị audio spectrum thì cần thực hiện:

• Định dạng âm thanh PCM (mono hoặc strereo) cần chuyển từ int sang float, riêng lẻ từng kênh.
• Làm phẳng góc nhọn âm thanh window function -- Trong bài viết này không áp dụng
• Chuyển đổi FFT
• Tính độ lớn của nửa đầu mảng FFT trả về (sqrt(re^2 + im^2))
• Scale và hiển thị

Làm thế nào để lấy dữ liệu PCM khi playaudio?

Trước đây khi chưa có HTML5 Audio thì hoàn toàn bất khả thi với javascript, việc hiển thị spectrum này chỉ dành cho App desktop, java, flash...
Đọc bài của bạn @huydo Giới thiệu về web audio api trên html5 và google một chút thì có phương án:

var scriptNode = audioCtx.createScriptProcessor(256, 1, 1);
scriptNode.onaudioprocess = function(audioProcessingEvent) {

}

sẽ cung cấp 256 bytes PCM dữ liệu trước khi output ra sound device.

Chuyển đổi FFT bằng Javascript

Có sẵn ở đây

Hiển thị:

HTML5 Canvas đơn giản

<canvas id="channel0" awidth="600" height="400" style="background:lightgray"></canvas>
<canvas id="channel1" awidth="600" height="400" style="background:lightgray"></canvas>

Code

Github: https://github.com/tuanpmt/html5-audio-fft
Demo: http://tuanpmt.github.io/html5-audio-fft ==> Đợi load audio 6M hơi lâu chút + only 1 channel.
Other project: http://tuanpmt.github.io/led-rgb-audio-spectrum/