TP029

ÂM — Tai nghe & thiết bị âm thanh

Trang sản phẩm âm thanh với 3 model 3D: tai nghe nổi giữa vòng sóng nhảy theo nhạc tự tổng hợp bằng Web Audio, demo chống ồn có sóng đảo pha và nghe được tiếng ồn thành phố, pad âm thanh không gian HRTF kéo nguồn âm quanh đầu.

Điểm nổi bật

Intro oscilloscope: đường thẳng rung dần thành sóng nhiều hoạ âm theo tiến độ tải, rồi màn hình mở theo đường sóng
Hero tai nghe 3D giữa vòng sóng đồng và bụi sáng, phản ứng theo phổ nhạc lo-fi tự tổng hợp; 4 màu điểm nhấn đổi trên model
Chống ồn: 3 đường sóng (ồn, sóng khử, còn lại) theo thanh trượt, bật nghe tiếng ồn thành phố có còi xe, ANC giảm thật
Âm thanh không gian HRTF, ÂM Buds & loa 3D, vật liệu, so sánh 3 sản phẩm; song ngữ

Three.js
Web Audio
Canvas 2D
Motion
Lenis
Vite
Tripo 3D
GPT Image
3D models
Web Audio
Interactive demo
Tech product

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 thương hiệu tai nghe, loa, thiết bị công nghệ: tai nghe 3D với vòng sóng nhảy theo nhạc, demo chống ồn nghe được, âm thanh không gian HRTF, tai nghe không dây & loa 3D, bảng so sánh.

Mọi âm thanh đều tổng hợp bằng Web Audio — không cần file nhạc, không lo bản quyền nhạc.

Chạy thử

npm install
npm run dev       # http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/

Mặc định tiếng Việt; thêm ?lang=en để mở tiếng Anh. Âm thanh chỉ phát khi người xem bấm nút (quy định autoplay của trình duyệt).

Model 3D

Model	Dùng ở
`headphones`	Hero (vòng sóng, đổi màu điểm nhấn)
`earbuds-case`	Khối ÂM Buds
`speaker`	Khối ÂM Go

GLB ở public/models/, danh sách trong public/models/manifest.json. Chưa có GLB → tự dùng ảnh + bản đồ độ sâu làm bản tạm.
Tạo model mới từ ảnh: dùng Image to 3D của Meshy (bật texture PBR), tải về định dạng GLB.
Thay model: đặt GLB gốc vào assets-in/models/<tên>.glb, rồi:

npm i -D @gltf-transform/core @gltf-transform/extensions @gltf-transform/functions meshoptimizer sharp
node scripts/optimize-models.mjs

Cấu trúc

src/audio.js       Bộ âm thanh: nhạc lo-fi, tiếng ồn thành phố + ANC, nguồn âm HRTF
src/hero-sound.js  Tai nghe 3D + vòng sóng + bụi sáng phản ứng theo phổ
src/scopes.js      Canvas: 3 đường sóng chống ồn, pad âm thanh không gian
src/intro.js       Intro oscilloscope
src/slots.js       Model gắn vào ô HTML (buds, loa)
src/main.js        Màu điểm nhấn, nút phát, so sánh
src/locales.js     Toàn bộ chữ vi + en

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Màu điểm nhấn (độ xoay sắc độ phần đồng)	`ACCENTS` trong `src/main.js`
Hợp âm, nhịp nhạc demo	`CHORDS`, `84 bpm` trong `src/audio.js`
Mức dB hiển thị	`78 - anc * 42` trong `src/main.js`
Thông số so sánh	`cmp.0/1/2` trong `src/locales.js` (ngăn bằng `	`)

Ghi chú

Thương hiệu, thông số và giá là minh hoạ.
Thư viện: Three.js, Motion, Lenis, Vite (MIT). Font Google (OFL).