orbs.← Kolleksiyaga qaytish

FOYDALANISH VA INTEGRATSIYA

Ovozga shakl berish,
bir necha qadamda.

Kolleksiyadagi har bir orb mustaqil: uni sinang, holatlarini ko‘ring va o‘z loyihangizda ishlating.

01

Avval sinab ko‘ring

  1. Orb tanlang. Galereya kartasi yoki sinov maydonidagi ro‘yxatdan ko‘rinishni almashtiring. “Tayyor” har bir orbning o‘z shaklini ko‘rsatadi.
  2. Holatni almashtiring. “Namoyishni boshlash” o‘nta holatni ketma-ket ko‘rsatadi. Bu vizual demo; unda ovoz ijro etilmaydi.
  3. Mikrofonni yoqing. Ruxsat berganingizdan so‘ng Tinglash va Gapirish ovozingizga javob beradi. Ikkisi orasida mikrofon uzilmaydi.
  4. Audio bilan sinang. Audio faylni tanlang — orb aynan ijro etilayotgan audio bilan harakat qiladi. Fayl serverga yuklanmaydi.

Pauza tugmasi harakatni to‘xtatadi. Kamera tugmasi shaffof PNG saqlaydi. 1–0 tugmalari holatni, Space namoyishni boshqaradi.

02

Holatlar nimani bildiradi?

HolatVazifasiKo‘rinishi
TayyorSuhbatni kutishHar orbning o‘z tabiiy shakli
UlanishAloqa o‘rnatishUzluksiz aylanadigan loading
TinglashKiruvchi ovozMahalliy akustik to‘lqinlar
O‘ylashJavob tayyorlashOrbital yoki materialga mos oqim
GapirishChiquvchi ovozTashqariga tarqaladigan reaksiya
UzilishVaqtincha to‘xtashZarrachali pauza belgisi
TugallandiMuvaffaqiyatZarrachali tasdiq belgisi
XatoQayta urinish kerakZarrachali undov
Ovoz o‘chiqMikrofon o‘chirilganSlash-mikrofon
NofaolYordamchi faol emasOhista harakatdagi quvvat belgisi
03

Loyihangizga ulash

JavaScript komponenti tashqi kutubxonasiz ishlaydi. Uchta faylni o‘z loyihangizga ko‘chiring:

<canvas id="orb" style="width:320px;height:320px"></canvas>
<script src="src/orb-designs.js"></script>
<script src="src/orb-formations.js"></script>
<script src="src/particle-orb.js"></script>
<script>
const orb = new ParticleOrb(document.querySelector('#orb'), {
  design: 'tide', theme: 'dark', state: 'idle',
});
orb.setState('listening');
orb.setLevels({ level: 0.6, low: 0.5, mid: 0.3, high: 0.2 });
// Komponent yopilganda: orb.destroy();
</script>

setDesign(), setTheme(), setState(), setLevels(), setPaused() va destroy() asosiy metodlar. To‘liq misollar manba to‘plamidagi docs/INTEGRATION.mdda.

Manba kodini olish ↓
04

Audio va maxfiylik

Mikrofon faqat Siz tugmani bosib, brauzerga ruxsat berganingizda ochiladi. Ovoz qurilmangizda tahlil qilinadi: bu sayt uni yozmaydi, serverga yubormaydi va karnayga qaytarmaydi.

Haqiqiy audio uchun RMS, past/o‘rta/yuqori chastotalar va 64 ta PCM namunasi olinadi. Hududlar turli kechikish va tezlik bilan javob beradi. Sukutda audio ta’siri so‘nadi; orbning tabiiy sokin harakati qoladi.

AI yoki TTS loyihangizda gapirish holatiga aynan ijro audiosining darajasini bering. Vizual demo ovoz darajasini haqiqiy audio deb ko‘rsatmang. HTTPS yoki localhost zarur.

Kamaytirilgan harakat sozlamasi yoqilganida geometrik harakat tinadi. Sahifa yashirilsa mikrofon to‘xtatiladi.

05

Hisobchim uchun native variant

Lojuvard ko‘k, firuza va oltin ranglaridagi Flutter orb bosh sahifa yordamchisiga va ovoz kiritish oynalariga moslangan. Tayyor holati sfera; kerakli holatlarda zarrachalar belgiga yig‘iladi.

Native komponent mikrofon amplitudasi va TTS lifecycle’iga ulangan. Amaldagi native TTS ko‘prigi chiqish amplitudasini bermaydi. Bu native demoni aniq TTS waveform’i deb qabul qilmang.

Light/dark ko‘rinishlari ↗ · Flutter manbasi ↓

Manbalar va paket tarkibi

Uchta foydalanuvchi taqdim etgan statik mesh/halqa arxivi vizual referens bo‘ldi; orb geometriyalari kod orqali yangidan qurildi. Stock EPS fayllar public manba paketiga kiritilmagan. Paketda komponent, 15 demo, integratsiya yo‘riqnomasi va Hisobchim uchun alohida native komponent mavjud.

Sayt frontend ko‘rgazma. Unda AI backend yoki matndan ovoz yaratish xizmati ulanmagan.