Files

T

3dtours d5143b440a fix: change md files to md folder

2026-07-21 18:22:39 +07:00

14 KiB

Raw Permalink Blame History

Dưới đây là toàn bộ nội dung tài liệu đặc tả kiến trúc xử lý âm thanh chuyên nghiệp cấp độ Desktop trên Client-Side đã được chuyển đổi sang định dạng Markdown chuẩn, tối ưu hóa các khối mã nguồn (text, cpp), căn chỉnh bảng biểu, sơ đồ luồng ASCII và các công thức toán học dạng LaTeX:

Đặc Tả Kiến Trúc: Xử Lý Âm Thanh Chuyên Nghiệp Cấp Độ Desktop Trên Client-Side

Tài liệu này đặc tả kiến trúc hệ thống, giải pháp công nghệ và các thuật toán xử lý tín hiệu số (DSP) để xây dựng bộ máy biên tập âm thanh chuyên nghiệp (Audio Editor Engine) hoạt động độc lập và hiệu năng cao ngay trên máy trạm (Client-side) tương tự như Sound Forge hay Adobe Audition, sử dụng nền tảng HTML5, Web Audio API nâng cao, WebAssembly (WASM) và SharedArrayBuffer.

1. Sơ Đồ Kiến Trúc Lõi (Client-Side Audio Engine Architecture)

Để đạt được hiệu năng xử lý không độ trễ và không gây nghẽn luồng giao diện (UI Main Thread), hệ thống bắt buộc phải tách biệt hoàn toàn ba lớp luồng thực thi:

┌────────────────────────────────────────────────────────────────────────┐
│                        MAIN THREAD (UI / REACT)                        │
│  - Render giao diện Canvas, Sliders, Rulers, Waveform.                 │
│  - Nhận tương tác phím/chuột (Shift+Click, Drag, Zoom).                 │
│  - Giao tiếp bất đồng bộ qua MessagePort / Worker PostMessage.         │
└───────────────────┬────────────────────────────────▲───────────────────┘
                    │                                │
                    │ SharedArrayBuffer / Atomics    │ SharedArrayBuffer / Atomics
                    ▼                                │
┌────────────────────────────────────────────────────┴───────────────────┐
│              AUDIO WORKLET THREAD (LOW-LATENCY AUDIO RENDERING)        │
│  - Thực thi luồng xử lý âm thanh thời gian thực (Audio Graph).         │
│  - Đọc/Ghi mảng Ring Buffer (Shared Memory) không khóa (Lock-free).    │
│  - Gọi trực tiếp lõi xử lý DSP viết bằng WebAssembly (C++/Rust).       │
└────────────────────────────────────────────────────────────────────────┘

2. Các Công Nghệ Cốt Lõi Trên Client-Side

2.1. Web Audio API Nâng Cao (`AudioContext` & `AudioWorklet`)

Hạn chế của API cũ: Các nút xử lý mặc định (ScriptProcessorNode) chạy trực tiếp trên Main Thread, gây ra hiện tượng giật lag âm thanh (audio glitching/pop) bất cứ khi nào trình duyệt thực hiện tính toán UI hoặc render đồ họa nặng.
Giải pháp chuẩn DAW: Sử dụng AudioWorklet. Trình duyệt sẽ khởi tạo một luồng xử lý riêng biệt có độ ưu tiên thời gian thực (Real-time Priority Thread) tách biệt hoàn toàn khỏi luồng dựng hình UI.

2.2. WebAssembly (WASM) — Bộ Máy DSP Hiệu Năng Tiệm Cận Native

Vai trò: JavaScript không có kiểu dữ liệu tối ưu và tốc độ thực thi các vòng lặp mẫu nhanh bằng các ngôn ngữ có biên dịch biên độ thấp. WebAssembly cho phép đưa các thư viện xử lý âm thanh C++ hoặc Rust (như FFmpeg, SoX, Superpowered, hoặc JUCE DSP) chạy trực tiếp trong trình duyệt với hiệu năng đạt mức 90\% \rightarrow 95\% so với phần mềm máy tính.
Quy trình hoạt động: Giải mã tệp WAV nhị phân vào bộ nhớ Heap của WASM (WASM Linear Memory). Luồng C++ sẽ xử lý toán học trực tiếp trên các con trỏ bộ nhớ này thông qua kiểu dữ liệu mảng float 32-bit (Float32Array).

2.3. `SharedArrayBuffer` & `Atomics` — Chia Sẻ Bộ Nhớ Không Khóa

Vấn đề luồng: Việc chuyển dữ liệu lớn (Hàng chục Megabytes dữ liệu âm thanh) giữa Main Thread và AudioWorklet Thread bằng lệnh postMessage thông thường sẽ gây ra độ trễ sao chép dữ liệu (Serialization Latency) và tăng rác bộ nhớ (Garbage Collection overhead).
Giải pháp: Sử dụng SharedArrayBuffer. Cả hai luồng UI và AudioWorklet cùng truy cập vào một vùng nhớ RAM vật lý duy nhất. Sử dụng thư viện Atomics để đồng bộ hóa và ghi nhận trạng thái con trỏ phát nhạc (Playhead position) một cách an toàn và không gây nghẽn luồng xử lý (Lock-free Ring Buffer).

3. Các Thuật Toán DSP Chuyên Sâu Cần Port Sang Client-Side

Để đạt được chất lượng xử lý của Sound Forge và Audition, hệ thống phải thực hiện các thuật toán tín hiệu số trực tiếp trên mảng dữ liệu x[n] ở Client-side:

3.1. Phân Tích Phổ Tần Số Thời Gian Thực (Fast Fourier Transform — FFT)

Để hiển thị biểu đồ phổ (Spectrogram) và thực hiện biên tập tần số (Spectral Editing) như Adobe Audition, ta chuyển đổi tín hiệu từ miền thời gian sang miền tần số bằng phép biến đổi Fourier nhanh (FFT) bậc N (thường chọn N = 2048 hoặc N = 4096 mẫu):

X(f) = \sum_{n=0}^{N-1} x[n] \cdot e^{-i 2 \pi f n / N}

Tối ưu hóa: Sử dụng thư viện WASM FFT (như KissFFT hoặc FFTW biên dịch sang WASM) để thực hiện tính toán song song bằng tập lệnh Vector hóa SIMD (Single Instruction, Multiple Data) của CPU máy khách.

3.2. Thuật Toán Co Giãn Thời Gian & Dịch Cao Độ (Phase Vocoder)

Để thực hiện tính năng thay đổi tốc độ (Stretch) mà không đổi cao độ (Pitch), hoặc dịch giọng (Pitch shifting) mà không đổi thời lượng:

Phân tích: Thực hiện biến đổi Fourier thời gian ngắn (STFT) với cửa sổ Hanning chồng chập 75\% (Overlap-Add):

w[n] = 0.5 \cdot \left(1 - \cos\left(\frac{2\pi n}{N-1}\right)\right)

Dịch chuyển pha: Tính toán sự sai lệch pha \Delta \Phi giữa các khung (frames) liên tiếp để xác định tần số tức thời và thực hiện bù pha (Phase Resynthesis) theo tỷ lệ co giãn S:

S = \frac{\text{Duration}_{\text{new}}}{\text{Duration}_{\text{original}}}

Tổng hợp: Tái thiết lập tín hiệu bằng thuật toán biến đổi ngược (ISTFT) và phương pháp cộng chồng chập (OLA — Overlap-Add) để tạo ra tệp âm thanh trơn tru, không bị méo dạng hay giật tiếng.

3.3. Thuật Toán Lọc Méo Tiếng & Compressor Động (Dynamics Processing)

Lập trình thuật toán Compressor/Limiter để kiểm soát biên độ đỉnh của tín hiệu tự động bằng cách tính toán mốc năng lượng RMS trung bình của cửa sổ tín hiệu:

x_{\text{RMS}} = \sqrt{\frac{1}{M}\sum_{k=0}^{M-1} x[n-k]^2}

Hệ số khuếch đại Gain áp dụng G(t) được tính toán động dựa trên các tham số Threshold (T_{\text{dB}}), Ratio (R), Attack (t_A) và Release (t_R):

G_{\text{target}}(t) = \begin{cases} 0 & x_{\text{dB}} \le T_{\text{dB}} \\ (T_{\text{dB}} - x_{\text{dB}}) \cdot \left(1 - \frac{1}{R}\right) & x_{\text{dB}} > T_{\text{dB}} \end{cases}

4. Giải Pháp Biên Tập Không Phá Hủy (Non-Destructive Editing VFS)

Các phần mềm chuyên nghiệp không chỉnh sửa trực tiếp vào file WAV gốc trong suốt quá trình làm việc để tránh làm giảm chất lượng hoặc tiêu tốn RAM. Ta áp dụng kiến trúc Hệ thống tệp ảo phi tuyến (Virtual Non-Linear File System - VFS):

[ Tệp âm thanh gốc trong RAM ] ──────────────────────────────────────────┐
                                                                         │
[ Bảng chỉ mục liên kết phân đoạn (Non-Destructive Edit List - EDL) ]    │
  ├── Phân đoạn 1: Đọc từ giây 0s  -> 3.5s ──────────────────────────────┼─► [ Kết xuất ra Loa / Master ]
  ├── Phân đoạn 2: [SILENCE / KHOẢNG LẶNG] độ dài 1.2s                   │
  └── Phân đoạn 3: Đọc từ giây 15s -> 22.4s (Đã đảo ngược - Reverse)    ┘

4.1. Cơ chế hoạt động:

Khi người dùng thực hiện lệnh Cut, Paste, Delete, hệ thống không xóa hay di chuyển bất kỳ byte dữ liệu nào trong mảng AudioBuffer gốc.
Hệ thống chỉ cập nhật một danh sách chỉ mục bao gồm các đối tượng con trỏ định vị (Edit Decision List - EDL):

[
  { "source_buffer_id": "track_1", "start_sample": 0, "length": 176400, "playback_rate": 1.0 },
  { "source_buffer_id": "silence", "start_sample": 0, "length": 44100, "playback_rate": 1.0 },
  { "source_buffer_id": "track_1", "start_sample": 882000, "length": 220500, "playback_rate": -1.0 }
]

Lợi ích: Thao tác Undo/Redo diễn ra tức thời (Instantaneous) và tốn 0\text{ ms} bất kể tệp âm thanh dài hàng tiếng đồng hồ, do hệ thống chỉ cập nhật mảng JSON EDL siêu nhẹ mà không phải tính toán mảng mẫu nhị phân thô.

5. Hiện Thực Hóa Mã Nguồn DSP Chạy Trên WASM Client-Side

Dưới đây là thiết kế mã nguồn C++ mẫu (core/dsp_engine.cpp) được tối ưu hóa cao để biên dịch sang WebAssembly thông qua bộ dịch Emscripten, thực hiện xử lý âm thanh không độ trễ trực tiếp trong AudioWorklet trên trình duyệt:

#include <emscripten.h>
#include <cmath>
#include <vector>

// Sử dụng EMSCRIPTEN_KEEPALIVE để giữ hàm khi biên dịch sang WASM
extern "C" {

    /**
     * Thuật toán áp dụng Volume Gain và Panning Hằng Số Năng Lượng (Constant-Power)
     * Thao tác trực tiếp trên vùng nhớ RAM tuyến tính của WASM (WASM Linear Memory)
     */
    EMSCRIPTEN_KEEPALIVE
    void process_audio_block(
        float* input_l,      // Con trỏ kênh trái đầu vào
        float* input_r,      // Con trỏ kênh phải đầu vào
        float* output_l,     // Con trỏ kênh trái đầu ra
        float* output_r,     // Con trỏ kênh phải đầu ra
        int block_size,      // Kích thước khối (thường mặc định 128 mẫu trong Web Audio)
        float volume_db,     // Độ lớn âm lượng điều chỉnh (dB)
        float pan            // Vị trí panning từ -1.0 (Trái) đến 1.0 (Phải)
    ) {
        // 1. Quy đổi dB sang hệ số nhân tuyến tính
        float gain = powf(10.0f, volume_db / 20.0f);

        // 2. Thuật toán Constant-Power Panning Law
        // Quy đổi pan từ [-1.0, 1.0] sang góc quét theta [0, pi/2]
        float theta = ((pan + 1.0f) / 2.0f) * (M_PI / 2.0f);
        float gain_l = cosf(theta) * gain;
        float gain_r = sinf(theta) * gain;

        // 3. Thực thi tính toán vector hóa siêu tốc (SIMD-capable loop)
        #pragma clang loop vectorize(enable)
        for (int i = 0; i < block_size; ++i) {
            output_l[i] = input_l[i] * gain_l;
            output_r[i] = input_r[i] * gain_r;
        }
    }
}

6. Lộ Trình Triển Khai Chuyển Đổi Sang Client-Side (WASM DSP Pipeline)

Để dịch chuyển dự án từ mô hình xử lý nặng ở Server sang Client-side Audio Engine chuyên nghiệp, chúng ta triển khai theo 4 bước sau:

[ GIAI ĐOẠN 1 ] ──► Tách biệt luồng UI và luồng Audio bằng AudioWorklet.
[ GIAI ĐOẠN 2 ] ──► Biên dịch các thư viện DSP C++/Rust sang WebAssembly (.wasm).
[ GIAI ĐOẠN 3 ] ──► Triển khai bảng chỉ mục EDL để hỗ trợ Undo/Redo phi tuyến tức thời.
[ GIAI ĐOẠN 4 ] ──► Tận dụng WebGL/WebGPU để kết xuất đồ thị sóng & spectrogram bằng GPU.

1. Triển khai AudioWorklet Node

Thay thế hoàn toàn bộ đệm vẽ cũ bằng cách đăng ký một AudioWorkletProcessor chạy trên luồng phụ để liên tục nạp dữ liệu và cấp phát tín hiệu nghe thử thời gian thực mà không làm nghẽn giao diện.

2. Biên dịch WASM Toolchain

Sử dụng Emscripten SDK để biên dịch mã nguồn C++ của các hiệu ứng (Reverb, Delay, Phase Vocoder) thành tệp .wasm. Frontend tải bất đồng bộ tệp này khi khởi chạy ứng dụng và ánh xạ trực tiếp vùng nhớ RAM tuyến tính của WASM vào luồng âm học của trình duyệt.

3. Tích hợp WebGL/WebGPU Render Sóng Âm

Thay vì thực hiện vẽ lại Canvas bằng CPU Main Thread thông qua Context 2D truyền thống (thường gây lag khi zoom sâu), chúng ta chuyển các tọa độ đỉnh mẫu sang bộ nhớ của GPU và sử dụng WebGL/WebGPU để kết xuất vectơ sóng âm ở tần số quét 60\text{ Hz} \rightarrow 120\text{ Hz} cực kỳ mượt mà tương tự như Sound Forge.

14 KiB Raw Permalink Blame History