HTML5 Web Audio spectrum analyzer (FFT)
fft
1
HTML5
26
Javascript
246
White

Tuan PM viết ngày 27/05/2015

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.
alt text
Một số ví dụ hiển thị spectrum dạng visualization:

Để 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 html5google 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" width="600" height="400" style="background:lightgray"></canvas>
<canvas id="channel1" width="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/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tuan PM

8 bài viết.
87 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
18 9
Giới thiệu Bài viết này nhằm mục đích giới thiệu về IoTs, các phần cứng, platform hỗ trợ Những ưu điểm của vượt trội của các platform dùng LUA,...
Tuan PM viết 3 năm trước
18 9
White
13 4
Máy tính nhúng giá rẻ Raspberry Pi không còn xa lạ với các bạn thích công nghệ. Ngoài những ứng dụng dành cho giải trí đa phương tiện, Raspberry Pi...
Tuan PM viết 3 năm trước
13 4
White
13 1
Tổng quan Hiện tại Raspberry PI đã ra phiên bản 3, với nhiều tính năng vượt trội, đặc biệt là đã tích hợp Wifi + BLE trong khi giá vẫn không đổi. ...
Tuan PM viết hơn 2 năm trước
13 1
Bài viết liên quan
White
43 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
87 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!