Melihat Suara

## Suara yang Dibuat Terlihat — Prompt Produksi

Buat **“Suara yang Dibuat Terlihat”**, pengalaman sains interaktif yang matang untuk publik, dibangun dengan **Three.js**. Ubah suara menjadi bentuk 3D yang indah dan responsif, yang dapat dieksplorasi siapa pun tanpa pengetahuan musik atau sains. Hasilkan **situs web yang telah dideploy** dan **video showcase MP4 sinematik**.

Pengalaman ini harus terasa seperti museum sains interaktif premium: memukau secara visual, langsung mudah dipahami, menyenangkan, dan akurat secara ilmiah. Rancang untuk audiens luas di desktop maupun seluler.

### PENGALAMAN PERTAMA

Buka dengan patung suara bercahaya yang bergerak perlahan di atas latar tengah malam yang pekat. Gunakan tipografi gading hangat, aksen sian elektrik, ungu, dan koral yang tidak berlebihan. Pertahankan komposisi yang elegan dan antarmuka minimal.

Tampilkan judul **“Lihat kemampuan suara.”** Sediakan tiga titik masuk yang jelas:

- **Putar Suara** — langsung mulai contoh audio terkurasi beserta visualisasinya.
- **Gunakan Mikrofon Saya** — visualisasikan suara pengguna atau suara di sekitarnya.
- **Unggah Audio** — jelajahi file audio lokal.

Biarkan pengunjung merasakan sesuatu yang menarik dengan satu klik. Sediakan contoh bawaan agar akses mikrofon dan unggahan file bersifat opsional. Sebelum pemutaran, jalankan pratinjau senyap yang diberi penanda jelas.

### TIGA CARA MENJELAJAHI

**1. Patung Suara — visualisasi audio artistik**

Buat medan pahatan dari partikel dan pita mengalir yang merespons analisis audio langsung secara mulus. Petakan frekuensi rendah ke gerakan luas, frekuensi menengah ke detail struktural, dan frekuensi tinggi ke aksen gemerlap halus. Biarkan kenyaringan memengaruhi skala dan energi tanpa lonjakan mendadak.

Berikan respons yang tampak berbeda untuk ucapan, tepukan tangan, senandung, dan musik. Beri label mode ini sebagai interpretasi artistik terhadap suara.

**2. Penjelajah Gelombang — pahami sinyal**

Tampilkan bentuk gelombang animasi di samping spektrum frekuensi, dengan penyajian spasial opsional. Jelaskan secara sederhana: bentuk gelombang menunjukkan bagaimana sinyal berubah seiring waktu; spektrum menunjukkan kandungan frekuensinya.

Sertakan generator nada interaktif dengan kontrol frekuensi dan volume yang berlabel jelas. Biarkan pengguna membandingkan nada murni dengan nada yang lebih kaya dan melihat perbedaannya. Gunakan volume bawaan yang lembut, transisi audio mulus, serta kontrol berhenti yang jelas. Jelaskan bahwa amplitudo visual menunjukkan tingkat sinyal masukan, bukan kenyaringan fisik yang telah dikalibrasi.

**3. Pola Resonansi — jelajahi getaran**

Tampilkan pelat bergetar virtual dengan partikel menyerupai pasir yang membentuk pola nodal. Sediakan beberapa mode getaran yang diterapkan dengan saksama dan dapat dieksplorasi pengguna dengan mengubah frekuensi eksitasi.

Dasarkan pola pada model pelat terdokumentasi dengan geometri dan kondisi batas yang ditentukan. Jelaskan bahwa partikel berkumpul di dekat area dengan getaran minimum. Beri label pengalaman ini sebagai simulasi edukatif dan jelaskan penyederhanaannya. Bedakan efek dekoratif secara visual dari model ilmiah.

### MUDAHKAN PENEMUAN

Tawarkan ajakan singkat sesuai konteks, seperti **“Coba senandungkan satu nada stabil,” “Bertepuk tangan sekali,”** dan **“Bandingkan nada rendah dengan nada tinggi.”** Padankan masing-masing dengan respons yang langsung terlihat.

Sembunyikan kontrol lanjutan secara default. Sediakan kontrol jeda, reset, layar penuh, sensitivitas, dan intensitas gerakan. Pertahankan status sumber audio dan pemutaran yang jelas saat berganti mode. Gunakan penjelasan singkat yang aksesibel untuk setiap mode tanpa menutupi adegan.

### AUDIO DAN PRIVASI

Gunakan **Web Audio API** untuk pemutaran dan analisis, dengan penghalusan yang stabil dan normalisasi yang wajar. Minta akses mikrofon hanya setelah pengguna memilihnya. Proses masukan mikrofon dan file yang diunggah secara lokal; jangan unggah, simpan, atau transmisikan audio mereka. Ubah gaya ketiga mode dengan tema aurora: tambahkan gradien aurora hijau-ungu yang bergerak perlahan pada latar tengah malam, ubah warna partikel dan pita patung suara menjadi teal dan ungu, serta beri butiran pola resonansi cahaya dingin samar. Pertahankan teks berwarna gading, turunkan kecerahan keseluruhan untuk suasana mengamati langit malam, dan biarkan semua interaksi tetap sama. Tampilkan indikator mikrofon yang selalu terlihat dan kontrol **“Hentikan mikrofon”** yang jelas untuk melepaskan mikrofon. Nonaktifkan pemantauan mikrofon melalui speaker untuk mencegah umpan balik. Tangani penolakan izin, perangkat yang tidak tersedia, file yang tidak didukung, keheningan, dan audio yang terputus dengan baik.

Gunakan audio bawaan berlisensi CC0 yang terverifikasi atau berlisensi sesuai, serta sertakan manifes lisensi aset.

### KUALITAS VISUAL DAN TEKNIS

Gunakan perenderan partikel yang halus, kedalaman yang meyakinkan, bloom terkontrol, animasi mulus, dan pergerakan kamera yang tidak berlebihan. Pastikan teks tetap tajam dan kontrol mudah dibaca. Hindari kedipan agresif dan gangguan visual berlebihan.

Bangun aplikasi Three.js yang mudah dipelihara dengan geometri dan shader efisien GPU, buffer yang dapat digunakan ulang, kepadatan piksel yang dibatasi, jumlah partikel adaptif, dan preset kualitas. Analisis audio secara lokal agar pengunjung simultan tidak memerlukan pemrosesan audio sisi server. Sajikan aset statis yang dioptimalkan melalui hosting yang kompatibel dengan CDN.

Targetkan performa mulus di desktop dan performa yang tetap layak digunakan pada ponsel kelas menengah. Ukur laju bingkai aktual, penggunaan memori, dan perilaku pemuatan pada perangkat yang diuji. Jeda perenderan yang tidak diperlukan saat halaman disembunyikan dan lepaskan sumber daya audio serta GPU dengan benar.

Dukung sentuhan, navigasi keyboard, status fokus yang terlihat, kontrol yang aksesibel untuk pembaca layar, dan pengurangan gerakan. Sediakan alternatif 2D ringan saat WebGL tidak tersedia. Pastikan informasi penting dapat dipahami tanpa hanya mengandalkan warna atau audio.

### HASIL AKHIR

Deploy situs web yang selesai ke **URL HTTPS** publik yang berfungsi.

Hasilkan **MP4 H.264 1920 × 1080 berdurasi 30–45 detik** yang dapat diunduh, dengan audio berlisensi tersinkronisasi, dirender dari aplikasi yang sebenarnya. Tampilkan nada murni yang menjadi bentuk gelombang, suara yang lebih kaya mengubah patung, dan rangkaian pola resonansi. Gunakan pemutaran deterministik dan pengambilan bingkai stabil untuk hasil yang bersih.

Serahkan proyek sumber, aset lokal, manifes lisensi, model ilmiah dan pemetaan visualisasi yang terdokumentasi, instruksi deployment, serta laporan verifikasi singkat. Uji pengalaman yang telah dideploy di tata letak desktop dan seluler, alur izin mikrofon, pemutaran audio, unggahan, peralihan mode, aksesibilitas, dan pemutaran video. Laporkan lingkungan yang diuji dan keterbatasan yang tersisa secara akurat.

**JANGAN SERTAKAN:** efek dekoratif yang ditampilkan sebagai simulasi fisik, permintaan izin mikrofon saat halaman dimuat, unggahan audio ke server, suara yang diputar otomatis, umpan balik speaker, kontrol yang membingungkan, kedipan cepat, label yang tidak terbaca, fungsi placeholder, tata letak seluler yang rusak, watermark, atau klaim kesiapan produksi yang tidak didukung.

## Suara yang Dibuat Terlihat — Prompt Produksi

Buat **“Suara yang Dibuat Terlihat”**, pengalaman sains interaktif yang matang untuk publik, dibangun dengan **Three.js**. Ubah suara menjadi bentuk 3D yang indah dan responsif, yang dapat dieksplorasi siapa pun tanpa pengetahuan musik atau sains. Hasilkan **situs web yang telah dideploy** dan **video showcase MP4 sinematik**.

Pengalaman ini harus terasa seperti museum sains interaktif premium: memukau secara visual, langsung mudah dipahami, menyenangkan, dan akurat secara ilmiah. Rancang untuk audiens luas di desktop maupun seluler.

### PENGALAMAN PERTAMA

Buka dengan patung suara bercahaya yang bergerak perlahan di atas latar tengah malam yang pekat. Gunakan tipografi gading hangat, aksen sian elektrik, ungu, dan koral yang tidak berlebihan. Pertahankan komposisi yang elegan dan antarmuka minimal.

Tampilkan judul **“Lihat kemampuan suara.”** Sediakan tiga titik masuk yang jelas:

- **Putar Suara** — langsung mulai contoh audio terkurasi beserta visualisasinya.
- **Gunakan Mikrofon Saya** — visualisasikan suara pengguna atau suara di sekitarnya.
- **Unggah Audio** — jelajahi file audio lokal.

Biarkan pengunjung merasakan sesuatu yang menarik dengan satu klik. Sediakan contoh bawaan agar akses mikrofon dan unggahan file bersifat opsional. Sebelum pemutaran, jalankan pratinjau senyap yang diberi penanda jelas.

### TIGA CARA MENJELAJAHI

**1. Patung Suara — visualisasi audio artistik**

Buat medan pahatan dari partikel dan pita mengalir yang merespons analisis audio langsung secara mulus. Petakan frekuensi rendah ke gerakan luas, frekuensi menengah ke detail struktural, dan frekuensi tinggi ke aksen gemerlap halus. Biarkan kenyaringan memengaruhi skala dan energi tanpa lonjakan mendadak.

Berikan respons yang tampak berbeda untuk ucapan, tepukan tangan, senandung, dan musik. Beri label mode ini sebagai interpretasi artistik terhadap suara.

**2. Penjelajah Gelombang — pahami sinyal**

Tampilkan bentuk gelombang animasi di samping spektrum frekuensi, dengan penyajian spasial opsional. Jelaskan secara sederhana: bentuk gelombang menunjukkan bagaimana sinyal berubah seiring waktu; spektrum menunjukkan kandungan frekuensinya.

Sertakan generator nada interaktif dengan kontrol frekuensi dan volume yang berlabel jelas. Biarkan pengguna membandingkan nada murni dengan nada yang lebih kaya dan melihat perbedaannya. Gunakan volume bawaan yang lembut, transisi audio mulus, serta kontrol berhenti yang jelas. Jelaskan bahwa amplitudo visual menunjukkan tingkat sinyal masukan, bukan kenyaringan fisik yang telah dikalibrasi.

**3. Pola Resonansi — jelajahi getaran**

Tampilkan pelat bergetar virtual dengan partikel menyerupai pasir yang membentuk pola nodal. Sediakan beberapa mode getaran yang diterapkan dengan saksama dan dapat dieksplorasi pengguna dengan mengubah frekuensi eksitasi.

Dasarkan pola pada model pelat terdokumentasi dengan geometri dan kondisi batas yang ditentukan. Jelaskan bahwa partikel berkumpul di dekat area dengan getaran minimum. Beri label pengalaman ini sebagai simulasi edukatif dan jelaskan penyederhanaannya. Bedakan efek dekoratif secara visual dari model ilmiah.

### MUDAHKAN PENEMUAN

Tawarkan ajakan singkat sesuai konteks, seperti **“Coba senandungkan satu nada stabil,” “Bertepuk tangan sekali,”** dan **“Bandingkan nada rendah dengan nada tinggi.”** Padankan masing-masing dengan respons yang langsung terlihat.

Sembunyikan kontrol lanjutan secara default. Sediakan kontrol jeda, reset, layar penuh, sensitivitas, dan intensitas gerakan. Pertahankan status sumber audio dan pemutaran yang jelas saat berganti mode. Gunakan penjelasan singkat yang aksesibel untuk setiap mode tanpa menutupi adegan.

### AUDIO DAN PRIVASI

Gunakan **Web Audio API** untuk pemutaran dan analisis, dengan penghalusan yang stabil dan normalisasi yang wajar. Minta akses mikrofon hanya setelah pengguna memilihnya. Proses masukan mikrofon dan file yang diunggah secara lokal; jangan unggah, simpan, atau transmisikan audio mereka. Ubah pengalaman ini menjadi alat bantu pengajaran fisika untuk sekolah menengah pertama: beri label panjang gelombang, amplitudo, dan frekuensi dengan istilah serta satuan bahasa Mandarin pada mode bentuk gelombang dan spektrum, lalu jelaskan gelombang berdiri dan simpul dengan diagram singkat pada mode resonansi. Buka setiap mode dengan pengantar kelas maksimal 60 karakter Mandarin, dan akhiri dengan pertanyaan pilihan ganda yang dijawab langsung di halaman; jawaban benar membuka mode getaran berikutnya. Tampilkan indikator mikrofon yang selalu terlihat dan kontrol **“Hentikan mikrofon”** yang jelas untuk melepaskan mikrofon. Nonaktifkan pemantauan mikrofon melalui speaker untuk mencegah umpan balik. Tangani penolakan izin, perangkat yang tidak tersedia, file yang tidak didukung, keheningan, dan audio yang terputus dengan baik.

Gunakan audio bawaan berlisensi CC0 yang terverifikasi atau berlisensi sesuai, serta sertakan manifes lisensi aset.

### KUALITAS VISUAL DAN TEKNIS

Gunakan perenderan partikel yang halus, kedalaman yang meyakinkan, bloom terkontrol, animasi mulus, dan pergerakan kamera yang tidak berlebihan. Pastikan teks tetap tajam dan kontrol mudah dibaca. Hindari kedipan agresif dan gangguan visual berlebihan.

Bangun aplikasi Three.js yang mudah dipelihara dengan geometri dan shader efisien GPU, buffer yang dapat digunakan ulang, kepadatan piksel yang dibatasi, jumlah partikel adaptif, dan preset kualitas. Analisis audio secara lokal agar pengunjung simultan tidak memerlukan pemrosesan audio sisi server. Sajikan aset statis yang dioptimalkan melalui hosting yang kompatibel dengan CDN.

Targetkan performa mulus di desktop dan performa yang tetap layak digunakan pada ponsel kelas menengah. Ukur laju bingkai aktual, penggunaan memori, dan perilaku pemuatan pada perangkat yang diuji. Jeda perenderan yang tidak diperlukan saat halaman disembunyikan dan lepaskan sumber daya audio serta GPU dengan benar.

Dukung sentuhan, navigasi keyboard, status fokus yang terlihat, kontrol yang aksesibel untuk pembaca layar, dan pengurangan gerakan. Sediakan alternatif 2D ringan saat WebGL tidak tersedia. Pastikan informasi penting dapat dipahami tanpa hanya mengandalkan warna atau audio.

### HASIL AKHIR

Deploy situs web yang selesai ke **URL HTTPS** publik yang berfungsi.

Hasilkan **MP4 H.264 1920 × 1080 berdurasi 30–45 detik** yang dapat diunduh, dengan audio berlisensi tersinkronisasi, dirender dari aplikasi yang sebenarnya. Tampilkan nada murni yang menjadi bentuk gelombang, suara yang lebih kaya mengubah patung, dan rangkaian pola resonansi. Gunakan pemutaran deterministik dan pengambilan bingkai stabil untuk hasil yang bersih.

Serahkan proyek sumber, aset lokal, manifes lisensi, model ilmiah dan pemetaan visualisasi yang terdokumentasi, instruksi deployment, serta laporan verifikasi singkat. Uji pengalaman yang telah dideploy di tata letak desktop dan seluler, alur izin mikrofon, pemutaran audio, unggahan, peralihan mode, aksesibilitas, dan pemutaran video. Laporkan lingkungan yang diuji dan keterbatasan yang tersisa secara akurat.

**JANGAN SERTAKAN:** efek dekoratif yang ditampilkan sebagai simulasi fisik, permintaan izin mikrofon saat halaman dimuat, unggahan audio ke server, suara yang diputar otomatis, umpan balik speaker, kontrol yang membingungkan, kedipan cepat, label yang tidak terbaca, fungsi placeholder, tata letak seluler yang rusak, watermark, atau klaim kesiapan produksi yang tidak didukung.