Giới thiệu dự án

Sự giao thoa giữa nghệ thuật thị giác (visual arts) và âm nhạc trong các buổi trình diễn trực tiếp đóng vai trò cốt lõi trong việc định hình trải nghiệm đa giác quan của khán giả. Theo các thống kê từ ngành công nghiệp biểu diễn toàn cầu, hơn 85% các sự kiện âm nhạc điện tử và hòa nhạc quy mô lớn hiện nay bắt buộc phải tích hợp hệ thống Visual Jockey (VJ) hoặc trình chiếu ánh sáng đồng bộ thời gian thực để tối ưu hóa mức độ tương tác của người xem.

Tuy nhiên, việc triển khai visual biểu diễn truyền thống đang đối mặt với những rào cản kỹ thuật và chi phí đáng kể:

  • Sự phụ thuộc vào đội ngũ VJ chuyên trách: Nghệ sĩ biểu diễn thường không trực tiếp điều khiển visual mà phải ủy thác cho kỹ thuật viên ngoại bộ, dẫn đến độ trễ trong việc truyền tải cảm xúc, rủi ro lệch nhịp (desynchronization) và các tranh chấp về bản quyền tác phẩm hình ảnh.
  • Rào cản phần mềm và phần cứng chuyên dụng: Các phần mềm đồ họa thời gian thực phổ biến như Derivative TouchDesigner hay Synesthesia đòi hỏi máy trạm cấu hình cao (GPU rời mạnh mẽ), chi phí bản quyền thương mại đắt đỏ ($600 – $2.200 USD) cùng đường cong học tập (learning curve) vô cùng phức tạp.
  • Tính đóng và thiếu linh hoạt của môi trường desktop: Việc cài đặt phần mềm phụ thuộc sâu vào hệ điều hành (chủ yếu tối ưu trên Windows/macOS), gây cản trở khả năng truy cập nhanh chóng và biểu diễn linh hoạt trên nền tảng đám mây.

Đồ án tốt nghiệp "A Visual Art Generator For Music Artists" (Bộ sinh sản phẩm nghệ thuật tự động cho nghệ sĩ nhạc - VAG) do sinh viên Huỳnh Phước Thiện thực hiện dưới sự hướng dẫn của TS. Trương Tuấn Anh tại Khoa Khoa học và Kỹ thuật Máy tính – Trường Đại học Bách Khoa ĐHQG TP.HCM giải quyết trực tiếp bài toán này bằng cách chuyển dịch toàn bộ quy trình tổng hợp visual 3D tương tác âm thanh sang môi trường Web hiện đại.

Mục tiêu của dự án

  1. Xây dựng nền tảng Web-based Visual Art Generator: Phát triển ứng dụng web tương tác thời gian thực không cần cài đặt, hoạt động trực tiếp trên trình duyệt qua WebGL và React Three Fiber.
  2. Thuật toán phân tích âm thanh thời gian thực: Trích xuất các đặc trưng âm học cốt lõi bao gồm phổ tần số (Frequency Spectrum via Fast Fourier Transform - FFT) và biên độ năng lượng (Amplitude/RMS) bằng Web Audio API.
  3. Tích hợp giao thức phần cứng Web MIDI API: Kết nối trực tiếp thiết bị điều khiển phần cứng (MIDI Controller như Novation Launchkey MK2) để ánh xạ thông số (mapping) điều khiển hình học, ánh sáng, góc camera và chất liệu (texture displacement) theo thời gian thực.
  4. Hệ thống quản lý không gian 3D tương tác: Cho phép nhập mô hình 3D tùy chỉnh (GLTF, OBJ), thiết lập hệ tọa độ Cartesian, camera phối cảnh (Perspective)/trực giao (Orthographic), và hệ thống chiếu sáng động.

Kết quả kỳ vọng và phạm vi

  • Chỉ số kỹ thuật kỳ vọng: Duy trì tốc độ khung hình ổn định 60 FPS (khung hình/giây) trên trình duyệt tiêu chuẩn, độ trễ phản hồi tín hiệu âm thanh và MIDI dưới 15ms.
  • Phạm vi nghiên cứu: Tập trung vào xử lý âm thanh định dạng số (WAV, MP3), tiếp nhận tín hiệu Web MIDI chuẩn MIDI 1.0, và render đồ họa 3D mesh thời gian thực trên WebGL Canvas. Không bao gồm tính năng dựng video offline render theo luồng ray-tracing phức tạp.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng và khoảng trống công nghệ

Tiêu chí kỹ thuật Derivative TouchDesigner Synesthesia Visual Art Generator (VAG)
Nền tảng thực thi Desktop Native (Windows/macOS) Desktop Native (macOS/Windows) Web Browser (Cross-platform WebGL)
Chi phí bản quyền Miễn phí phi thương mại / $600 - $2200 $99 - $299 bản thương mại 100% Mã nguồn mở / Miễn phí
Yêu cầu cài đặt Cài đặt phức tạp, driver GPU Cài đặt ứng dụng native Không cài đặt (Zero-install URL access)
Giao diện điều khiển Node-based Visual Programming Shader GUI Preset UI/UX Trực quan + MIDI Hardware Mapping
Giao thức MIDI Hỗ trợ Native MIDI Hỗ trợ Native MIDI W3C Web MIDI API tiêu chuẩn web
Tùy biến mô hình 3D Nhập SOP/Geometry chuyên sâu Giới hạn theo shader preset Hỗ trợ GLTF/OBJ + 3D Mesh cơ bản

Ma trận ưu tiên yêu cầu người dùng (MoSCoW)

  • Must-have (Bắt buộc): Trình diễn 3D Canvas WebGL; Phân tích phổ tần số âm thanh qua AnalyserNode; Bắt sự kiện Web MIDI (Note On/Off, Control Change); Điều khiển Texture và Geometry; Điều chỉnh Camera (Perspective/Orthographic) và Lighting (Ambient/Directional).
  • Should-have (Nên có): Tải mô hình 3D bên ngoài định dạng .gltf/.obj; Trình trực quan hóa chỉ số hiệu năng (Stats.js FPS/MS); Hệ trục tọa độ hỗ trợ (Axis Helper, Orbit Controls).
  • Could-have (Có thể có): Preset lưu trữ cấu hình scene lên LocalStorage/Cloud; Tích hợp bộ lọc hậu kỳ (Post-processing bloom/glitch).
  • Won't-have (Chưa triển khai): Render Ray-tracing phân tán qua Cloud Server; Hỗ trợ giao thức không dây OSC/Ableton Link trong phiên bản web đầu tiên.

Thiết kế kiến trúc hệ thống

Kiến trúc phần mềm của VAG được phân tầng theo mô hình luồng dữ liệu đơn hướng (Unidirectional Data Flow) tích hợp React Component State và Redux Toolkit:

Cấu trúc Tech Stack và phiên bản cụ thể

  • Core Framework: Next.js v13.4.19 & React v18.2.0 (Tối ưu hóa Server-Side Rendering cho trang quản trị và Client-Side Rendering cho Canvas WebGL).
  • 3D Graphics Engine: Three.js r154 kết hợp @react-three/fiber v8.13.0 và @react-three/drei v9.80.0.
  • State Management: @reduxjs/toolkit v1.9.5 và react-redux v8.1.2.
  • Audio/Hardware APIs: W3C Web Audio API (Native Browser API) và W3C Web MIDI API.
  • Styling & UI: Tailwind CSS v3.3.3 kết hợp GUI parameter controls.

Cấu trúc lược đồ trạng thái (Redux State Tree Schema)

interface RootState {
  audio: {
    isLoaded: boolean;
    isPlaying: boolean;
    frequencyData: number[]; // Mảng 1024 bins từ FFT
    averageFrequency: number;
    amplitude: number; // Giá trị dB/Gain tính toán
  };
  midi: {
    isConnected: boolean;
    deviceName: string;
    noteVelocity: Record<number, number>; // Note number -> Velocity (0-127)
    controlChanges: Record<number, number>; // CC Controller number -> Value (0-127)
  };
  scene: {
    selectedGeometry: 'Box' | 'Sphere' | 'Cylinder' | 'Torus' | 'CustomModel';
    customModelUrl: string | null;
    textureUrl: string;
    wireframe: boolean;
    camera: {
      type: 'Perspective' | 'Orthographic';
      fov: number;
      position: [number, number, number];
    };
    lighting: {
      ambientIntensity: number;
      directionalIntensity: number;
      directionalPosition: [number, number, number];
    };
  };
}

Phương pháp luận phát triển (Methodology)

Dự án áp dụng mô hình phát triển Agile/Scrum rút gọn gồm 2 giai đoạn (Phases) thực thi từ ngày 30/05/2023 đến 15/09/2023:

  • Phase 1 (Tuần 1 - Tuần 7): Nghiên cứu lý thuyết xử lý tín hiệu âm thanh kỹ thuật số (DSP); Khảo sát Web MIDI Protocol; Đặc tả Functional & Non-functional Requirements; Thiết kế Component Architecture.
  • Phase 2 (Tuần 8 - Tuần 16): Lập trình module Web Audio Analyser; Lập trình bộ kết nối Web MIDI; Xây dựng Scene Renderer với React Three Fiber; Tích hợp Redux Store; Thực hiện bài kiểm thử tải và hiệu năng khung hình (Framerate Benchmarking).

Ma trận quản trị rủi ro kỹ thuật (Risk Assessment & Mitigation)

  1. Rủi ro rò rỉ bộ nhớ WebGL (Memory Leak): Khi tải nhiều texture và geometry liên tục, GPU buffer không được giải phóng.
    Giải pháp: Thực hiện Dispose Pattern trên Three.js geometry, material và texture thông qua useEffect cleanup hook trong React.
  2. Rủi ro nghẽn luồng xử lý chính (Main Thread Blocking): Thuật toán trích xuất dữ liệu âm thanh và MIDI diễn ra liên tục 60 lần/giây có thể gây drop khung hình.
    Giải pháp: Sử dụng Uint8Array truyền tham chiếu trực tiếp vào vòng lặp Render Loop (useFrame) của Three.js thay vì cập nhật sâu vào DOM state.

Implementation và kết quả

Chi tiết các thuật toán và mã nguồn cốt lõi

1. Xử lý và trích xuất dữ liệu âm thanh thời gian thực (Web Audio API)

Hệ thống sử dụng AudioContext kết nối với AnalyserNode để thực hiện thuật toán Biến đổi Fourier Nhanh (Fast Fourier Transform - FFT) nhằm phân tích tín hiệu âm thanh từ file WAV/MP3:

// Khởi tạo AudioContext và cấu hình AnalyserNode
export const setupAudioPipeline = (audioElement) => {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const analyser = audioCtx.createAnalyser();
  const source = audioCtx.createMediaElementSource(audioElement);

  // Cấu hình kích thước cửa sổ FFT (2048 mẫu dữ liệu cho độ phân giải 1024 bins tần số)
  analyser.fftSize = 2048;
  analyser.smoothingTimeConstant = 0.85; // Giảm hiện tượng giật cục của phổ

  const gainNode = audioCtx.createGain();
  source.connect(analyser);
  analyser.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  const bufferLength = analyser.frequencyBinCount;
  const frequencyDataArray = new Uint8Array(bufferLength);

  return { audioCtx, analyser, gainNode, frequencyDataArray };
};

2. Lắng nghe và giải mã thông điệp phần cứng qua Web MIDI API

Ứng dụng yêu cầu quyền truy cập MIDI từ trình duyệt (navigator.requestMIDIAccess) và thiết lập Event Listener để phân tích tín hiệu Byte nhị phân từ controller Novation Launchkey MK2:

// Khởi tạo kết nối Web MIDI API và ánh xạ tín hiệu
export const initializeMIDIAccess = (onMIDIMessageCallback) => {
  if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess({ sysex: false })
      .then((midiAccess) => {
        const inputs = midiAccess.inputs.values();
        for (let input of inputs) {
          input.onmidimessage = (message) => {
            const [status, data1, data2] = message.data;
            const command = status >> 4; // Trích xuất mã lệnh (Note On, Note Off, CC)
            const channel = status & 0xf;

            // Command 9: Note On, Command 11: Control Change (Knobs/Sliders)
            onMIDIMessageCallback({
              command,
              channel,
              noteOrController: data1,
              velocityOrValue: data2, // Giá trị 0 - 127
            });
          };
        }
      })
      .catch((err) => console.error("Không thể kết nối Web MIDI API:", err));
  }
};

3. Điều khiển biến dạng chất liệu 3D theo âm thanh và MIDI (React Three Fiber)

Thành phần Mesh 3D tương tác sử dụng hook useFrame để đọc mảng tần số âm thanh từ AnalyserNode và cập nhật trực tiếp lên Scale/Rotation/Vertex Displacement mà không gây Re-render React Tree:

import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';

export const AudioReactiveMesh = ({ analyser, frequencyDataArray, midiState }) => {
  const meshRef = useRef();

  useFrame((state, delta) => {
    if (!meshRef.current) return;

    // 1. Trích xuất năng lượng âm thanh dải Bass/Mid
    if (analyser && frequencyDataArray) {
      analyser.getByteFrequencyData(frequencyDataArray);
      
      // Tính toán năng lượng trung bình dải tần số thấp (Bass: bin 0 -> 10)
      let bassSum = 0;
      for (let i = 0; i < 10; i++) {
        bassSum += frequencyDataArray[i];
      }
      const bassScale = 1 + (bassSum / 10 / 255) * 1.5;

      // Áp dụng biến dạng kích thước tức thời theo nhịp bass
      meshRef.current.scale.lerp(
        new THREE.Vector3(bassScale, bassScale, bassScale),
        0.15
      );
    }

    // 2. Điều khiển chuyển động xoay và độ nhám chất liệu qua MIDI CC
    const knobValue = midiState.controlChanges[21] || 64; // CC 21 từ Novation Knob
    const rotationSpeed = (knobValue / 127) * 2.0;
    meshRef.current.rotation.x += delta * rotationSpeed;
    meshRef.current.rotation.y += delta * (rotationSpeed * 0.8);
  });

  return (
    <mesh ref={meshRef} position={[0, 0, 0]} castShadow receiveShadow>
      <torusKnotGeometry args={[1, 0.3, 128, 32]} />
      <meshStandardMaterial 
        roughness={0.2} 
        metalness={0.8} 
        wireframe={midiState.noteVelocity[60] > 0} // Note C4 bật chế độ Wireframe
      />
    </mesh>
  );
};

Kiểm thử và đo lường hiệu năng (Testing & Benchmarks)

Hệ thống đã trải qua các kịch bản kiểm thử tải nghiêm ngặt trên trình duyệt Google Chrome (v115+), Microsoft Edge và Mozilla Firefox trên cấu hình kiểm chuẩn: Intel Core i7-11800H, 16GB RAM, GPU NVIDIA RTX 3050 Laptop / Intel UHD Graphics.

Bảng kết quả đo lường hiệu năng thực tế

Kịch bản kiểm thử (Test Scenario) Số lượng Polygon Độ phân giải hiển thị Tỷ lệ khung hình (FPS) Độ trễ kích hoạt (Latency) Mức chiếm dụng RAM
Mesh cơ bản (Cube/Sphere) + Audio FFT 2.400 1920x1080 (Full HD) 60.0 FPS < 8.2 ms 125 MB
Mesh phức tạp (Torus Knot) + Audio + MIDI 45.000 1920x1080 (Full HD) 59.4 FPS < 11.5 ms 168 MB
Mô hình 3D Skeleton (GLTF) + Textures 120.000 1920x1080 (Full HD) 54.8 FPS < 14.1 ms 240 MB
Stress Test 5 Geometries + Dynamic Light 250.000 2560x1440 (2K QHD) 48.2 FPS < 18.6 ms 380 MB
  • Kết quả User Acceptance Testing (UAT): Đạt 100% tỷ lệ hoàn thành trên các chức năng cốt lõi (Tải file âm thanh, hiển thị FFT spectrum, phản hồi tín hiệu phím gõ MIDI, xoay góc camera trực quan). 95% người dùng thử nghiệm đánh giá giao diện thân thiện và dễ tiếp cận hơn cấu trúc node phức tạp của TouchDesigner.

Đổi mới và đóng góp

  1. Tiên phong mô hình Web-native Audio-Visual Generator: Thay vì giam hãm quy trình sáng tạo nghệ thuật thị giác trong các ứng dụng máy tính cồng kềnh, VAG khẳng định sức mạnh của công nghệ WebGL và Web Audio API hiện đại, đưa toàn bộ quy trình biểu diễn lên nền tảng web chỉ với một đường dẫn URL.
  2. Cầu nối phản ứng tức thời giữa Web MIDI API và WebGL Shaders: Giải quyết triệt để bài toán truyền thông điệp phần cứng với độ trễ siêu thấp (< 12ms), mang lại trải nghiệm điều khiển xúc giác chân thực tương đương các phần mềm VJ chuyên dụng tầm cỡ thế giới.
  3. Tiết kiệm 100% chi phí bản quyền và tối ưu 85% thời gian thiết lập: Nghệ sĩ biểu diễn độc lập không cần đầu tư các gói phần mềm thương mại đắt đỏ ($600 - $2200 USD) hay chuẩn bị hệ thống máy trạm cồng kềnh, mở ra cơ hội bình đẳng hóa công nghệ biểu diễn sân khấu.

Ứng dụng thực tế và triển khai

Tình huống ứng dụng thực tế (Use Cases)

  • Biểu diễn âm nhạc điện tử (DJ/Live Electronic Sets): Nghệ sĩ kết nối trực tiếp laptop biểu diễn với máy chiếu sân khấu qua trình duyệt, sử dụng MIDI Controller để vừa drop beat vừa kích hoạt hiệu ứng thị giác bùng nổ theo từng dải tần âm thanh.
  • Livestream trực tuyến và Virtual Stage: Tích hợp trực tiếp màn hình Canvas WebGL vào phần mềm phát sóng trực tiếp (OBS Studio) dưới dạng Browser Source, cho phép tạo hiệu ứng visual tương tác với nhạc nền thời gian thực.
  • Triển lãm nghệ thuật số và Bảo tàng tương tác: Ứng dụng tại các không gian nghệ thuật tương tác (Interactive Art Installations), nơi người tham quan có thể tương tác với âm thanh và các phím bấm để tự tạo ra tác phẩm đồ họa 3D độc bản.

Hướng dẫn triển khai và cài đặt hệ thống

# 1. Clone kho lưu trữ mã nguồn
git clone https://github.com/huynhphuocthien/visual-art-generator.git
cd visual-art-generator

# 2. Cài đặt các gói phụ thuộc (Node.js >= 16.x)
npm install

# 3. Khởi chạy môi trường phát triển cục bộ
npm run dev
# Ứng dụng chạy tại địa chỉ: http://localhost:3000

# 4. Đóng gói triển khai sản phẩm lên máy chủ Production
npm run build
npm run start

Hạn chế và hướng phát triển

Hạn chế kỹ thuật hiện tại

  • Giới hạn luồng Web Audio khi xử lý tệp nén lớn: Trình duyệt có thể mất 1-2 giây để giải mã (decode) các tệp âm thanh có độ phân giải siêu cao (FLAC/WAV dung lượng lớn) vào RAM.
  • Phụ thuộc vào chính sách bảo mật trình duyệt: Web Audio API yêu cầu thao tác người dùng (User Gesture như click chuột) để khởi động AudioContext nhằm tuân thủ chính sách Autoplay Policy của trình duyệt.
  • Chưa hỗ trợ kết xuất đa màn hình phần cứng chuyên dụng: Giới hạn trong phạm vi hiển thị cửa sổ trình duyệt, chưa thể xuất tín hiệu SDI đa kênh độc lập như các hệ thống media server cao cấp.

Lộ trình nâng cấp và mở rộng (Future Roadmap)

  • Chuyển dịch sang WebGPU Compute Shaders: Tận dụng WebGPU thế hệ mới để mô phỏng hệ thống hạt (Particle Systems) vượt mức 1.000.000 hạt tương tác âm thanh mượt mà ở 60 FPS.
  • Tích hợp Generative AI Textures: Ứng dụng Stable Diffusion WebGPU để tự động tạo chất liệu (texture) 3D dựa trên lời bài hát hoặc cảm xúc của giai điệu.
  • Đồng bộ hóa giao thức mạng không dây (Ableton Link / OSC over WebSocket): Cho phép đồng bộ nhịp độ (BPM) trực tiếp giữa phần mềm làm nhạc số (DAW) và ứng dụng VAG qua mạng nội bộ.

Đối tượng hưởng lợi

  • Sinh viên ngành CNTT và Đồ họa Đa phương tiện: Nguồn tài liệu tham khảo thực chiến về cách kết hợp WebGL, Three.js, React Three Fiber và xử lý tín hiệu số (DSP) trên trình duyệt.
  • Lập trình viên Frontend / Creative Technologists: Cung cấp mẫu thiết kế (Design Pattern) tối ưu cho việc điều khiển luồng dữ liệu thời gian thực tốc độ cao giữa phần cứng (MIDI) và GPU Canvas thông qua Redux Toolkit.
  • Nghệ sĩ biểu diễn, DJ và Nhà sản xuất âm nhạc độc lập: Công cụ biểu diễn visual mạnh mẽ, miễn phí 100%, dễ sử dụng, giúp họ làm chủ hoàn toàn không gian trình diễn nghệ thuật mà không phụ thuộc vào bên thứ ba.
  • Cộng đồng nghiên cứu Nghệ thuật Tạo sinh (Generative Art): Cung cấp thêm bằng chứng thực nghiệm vững chắc về khả năng thay thế phần mềm desktop của nền tảng web hiện đại.

Câu hỏi thường gặp

1. Ứng dụng VAG có yêu cầu cài đặt driver hoặc phần mềm bổ trợ nào trên máy tính không?

Hoàn toàn không. VAG được xây dựng hoàn toàn trên nền tảng web tiêu chuẩn (Web Standards). Người dùng chỉ cần một trình duyệt hỗ trợ WebGL và Web MIDI API (chẳng hạn như Google Chrome, Microsoft Edge, Brave, Opera) là có thể sử dụng ngay lập tức mà không cần bất kỳ driver bổ sung nào.

2. Thiết bị điều khiển MIDI nào tương thích với hệ thống Visual Art Generator?

Tất cả các thiết bị MIDI tuân thủ chuẩn giao tiếp MIDI 1.0/2.0 kết nối qua cổng USB (như Novation Launchkey, Akai APC, Arturia KeyLab, Korg nanoKONTROL) đều được nhận diện tự động thông qua W3C Web MIDI API ngay khi cắm vào máy tính.

3. Làm thế nào để nhập mô hình 3D cá nhân tự thiết kế từ Blender vào ứng dụng?

Người dùng chỉ cần xuất (export) mô hình từ Blender hoặc các phần mềm dựng hình 3D dưới định dạng .gltf hoặc .glb (định dạng tối ưu nhất cho web), sau đó sử dụng tính năng "Load 3D Models" trên thanh điều khiển của VAG để đưa vào không gian biểu diễn.

4. Hệ thống xử lý độ trễ giữa âm thanh và biến dạng hình ảnh như thế nào để đảm bảo tính thời gian thực?

VAG sử dụng trực tiếp đối tượng Uint8Array liên kết bộ đệm của AnalyserNode và đọc giá trị trực tiếp trong vòng lặp render đồ họa (useFrame của React Three Fiber). Bằng cách bỏ qua chu kỳ cập nhật Virtual DOM của React, độ trễ xử lý được tối ưu xuống mức dưới 12ms, hoàn toàn khớp với nhịp cảm nhận thị giác của mắt người.

5. Chi phí vận hành và bản quyền của giải pháp này so với các phần mềm thương mại ra sao?

Giải pháp VAG có chi phí bản quyền là 0 VNĐ (mã nguồn mở hoàn toàn), trong khi các phần mềm thương mại như TouchDesigner Pro có giá lên tới $2.200 USD hoặc Resolume Arena có giá $900 USD. Ứng dụng có thể được lưu trữ (host) miễn phí trên các nền tảng đám mây như Vercel, Netlify hoặc GitHub Pages với chi phí vận hành máy chủ gần như bằng không.

Kết luận

Đồ án tốt nghiệp "A Visual Art Generator For Music Artists" của tác giả Huỳnh Phước Thiện đã chứng minh tính khả thi, hiệu quả và tiềm năng to lớn của việc ứng dụng công nghệ web hiện đại vào lĩnh vực nghệ thuật tạo sinh (Generative Art) và trình diễn nghe nhìn trực tiếp. Bằng sự kết hợp chặt chẽ giữa Next.js, Three.js, React Three Fiber, Web Audio API và Web MIDI API, đề tài đã giải quyết thành công bài toán phức tạp về chi phí, tính tiện dụng và sự tự chủ trong sáng tạo cho cộng đồng nghệ sĩ âm nhạc. Đây là một công trình nghiên cứu ứng dụng có giá trị thực tiễn cao, đóng góp một giải pháp mã nguồn mở đột phá cho sự phát triển của công nghệ đa phương tiện tại Việt Nam.