Bikin Aplikasi PNGTuber Sendiri dari Nol dengan Custom Emote & Voice Animation

Banyak streamer dan kreator konten memilih menjadi PNGTuber untuk berkreasi tanpa harus menyalakan webcam. Alih-alih memakai software generik yang ada di pasaran, saya memutuskan untuk membangun aplikasi PNGTuber sendiri dari awal.

Dengan pendekatan ini, saya memiliki kendali penuh atas animasi buka-tutup mulut reaktif suara mikrofon, ekspresi mata berkedip, transisi emosi karakter, serta layout overlay canvas yang ringan untuk OBS Studio.

Fitur Utama Aplikasi

• Voice Reactive Animation: Menggunakan Web Audio API untuk mendeteksi volume input mikrofon secara real-time dan mengganti sprite bicara (open mouth / closed mouth).
• Auto-Blink Timing: Interval acak berkedip agar avatar terlihat hidup dan natural.
• Custom Expression Hotkeys: Shortcut keyboard untuk mengubah emosi avatar secara instan saat sesi streaming berlangsung.
• Ultra Lightweight: Berjalan langsung di browser atau local web view tanpa konsumsi RAM besar.

Cuplikan Konsep Reaktivitas Audio

Inti dari PNGTuber sederhana adalah Web Audio API AudioContext dengan AnalyserNode:

const audioContext = new AudioContext();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();

analyser.fftSize = 256;
source.connect(analyser);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function checkVolume() {
  analyser.getByteFrequencyData(dataArray);
  const average = dataArray.reduce((acc, val) => acc + val, 0) / dataArray.length;
  const isSpeaking = average > 25; // threshold volume
  updateAvatarState(isSpeaking);
  requestAnimationFrame(checkVolume);
}

Tonton Video Lengkap

Simak demonstrasi dan alur kerja aplikasi di video YouTube:

• Tonton di YouTube: Becoming a PNGTuber? I create the whole app