TP006

Sóng Festival

Lễ hội âm nhạc với 9 dây đàn neon rung theo nhạc ngũ cung được tổng hợp ngay trong trình duyệt — rê chuột để gảy dây, click để gảy nốt.

Điểm nổi bật

Nhạc ngũ cung kiểu đàn bầu tổng hợp bằng Web Audio — không cần file nhạc
Shader 9 dây đàn rung theo 8 dải tần, sóng lan theo nhịp trống
Rê chuột gảy dây, click gảy nốt theo cao độ, chữ khổng lồ nhảy theo nhạc
Lineup, lịch diễn dạng tab, 3 hạng vé, song ngữ VI/EN

Three.js
Web Audio
Motion
Vite
Audio-reactive
Shader
Brutalist
Generative music

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Website song ngữ (VI/EN) cho lễ hội âm nhạc: 9 dây đàn neon rung theo nhạc ngũ cung tổng hợp ngay trong trình duyệt, rê chuột gảy dây, click gảy nốt.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép giao diện + hiệu ứng Motion
src/audio.js          Nhạc tổng hợp Web Audio (giai điệu, trống, phân tích tần số)
src/scene.js          Shader 9 dây đàn phản ứng âm thanh
src/style.css         Giao diện (màu, font, bố cục)
src/i18n.js           Bộ chuyển ngôn ngữ (data-i18n)
src/ui-motion.js      Hiệu ứng chữ & cuộn dùng chung
PROMPT.md             Prompt dựng lại trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css`
Giai điệu, nhịp, thang âm	`MELODY`, `BPM`, `SCALE` trong `src/audio.js`
Âm sắc kiểu đàn bầu	hàm `pluck()` trong `src/audio.js`
Màu dây, số dây	`fragmentShader` trong `src/scene.js`
Lịch diễn	mảng `SCHEDULE` trong `src/main.js`
Dùng nhạc thật thay nhạc tổng hợp	nối một `<audio>` vào `AnalyserNode` trong `src/audio.js`

Ghi chú

Không dùng ảnh hay file nhạc. Trình duyệt chỉ phát âm thanh sau khi người dùng bấm "Bật nhạc".
Tên nghệ sĩ và thương hiệu là hư cấu.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).