Spectrogram

Masalahnya

Bentuk gelombang, garis naik-turun yang dikenal semua orang, menunjukkan seberapa keras sebuah suara. Bentuk gelombang tidak menunjukkan nada: dengung rendah dan siulan tinggi terlihat hampir sama. Spektrogram menunjukkan nada apa saja yang muncul dari waktu ke waktu. Beginilah cara pengenal suara, software musik, dan aplikasi pengenal kicau burung melihat suara.

Saya membangun ini untuk dua jenis pengunjung. Yang pertama pernah mendengar transformasi Fourier dan ingin memahaminya secara intuitif. Gagasan utamanya adalah sebuah tarik-ulur: ketepatan waktu dan ketepatan nada tidak bisa didapat sekaligus. Yang kedua adalah peninjau teknis. Browser sudah punya analyser bawaan yang bisa menggambar spektrogram dalam sepuluh baris, dan itu tidak membuktikan apa pun tentang orang yang memakainya. Saya ingin menulis transformasinya sendiri dan menunjukkan bahwa hasilnya benar.

Yang saya bangun

Matematikanya saya buktikan sebelum membuat layar apa pun

Transformasi yang salah tetap bisa menggambar spektrogram yang meyakinkan, dan kesalahannya tidak akan terlihat hanya dengan memandanginya. Karena itu saya menulis transformasi dan tesnya lebih dulu, baru kemudian antarmukanya. Saya menyiapkan empat pemeriksaan yang saling lepas: versi buku teks yang lambat sebagai pembanding, aturan energi yang harus berlaku untuk setiap masukan, perjalanan bolak-balik kembali ke sinyal asal, dan sinyal uji yang bisa dicek dengan tangan. Masing-masing menangkap kesalahan yang lolos dari yang lain.

Tarik-ulurnya menjadi kontrol yang bisa digeser

Layar utama menggambar suara dari mikrofon atau sampel sebagai gambar bergulir, dengan bentuk gelombang di atasnya. Saat kursor diarahkan, muncul waktu, nada, dan kekerasan suara yang tepat. Tarik-ulur antara waktu dan nada menjadi kontrol dengan tiga posisi bernama, dari "lebih tajam di waktu" sampai "lebih tajam di nada". Menggesernya mengajarkan gagasan itu lebih cepat daripada satu paragraf penjelasan. Pengaturan mentahnya disimpan di bagian "lanjutan".

Mulus di layar karena tidak ada memori yang dibuang

Pada 60 frame per detik, jeda pembersihan memori terlihat seperti aplikasi rusak. Saya menyiapkan semua memori kerja sekali per pengaturan lalu memakainya ulang, jadi aplikasi tidak mengalokasikan apa pun per frame. Analisis berjalan di thread latar. Tes yang menjaganya mengukur pertumbuhan memori selama satu menit penuh, selain kecepatan mentahnya.

Audio tidak pernah keluar dari perangkat

Situs yang meminta akses mikrofon wajib menjelaskan ke mana audionya pergi. Di sini jawabannya tidak ke mana-mana, dan build yang memastikannya. Sebuah pemeriksaan memindai situs yang sudah jadi untuk mencari apa pun yang akan diambil browser, dan menggagalkan deploy kalau menemukannya. Satu-satunya pengecualian adalah empat tautan ke profil saya sendiri, masing-masing dicatat dengan alamat persisnya.

Halaman bukti yang mengakui browser lebih cepat

Halaman bukti menjalankan transformasi saya di samping analyser bawaan browser dengan masukan yang sama, dan menampilkan selisihnya di setiap frekuensi. Analyser bawaan lebih cepat, dan halaman itu menyebutkannya. Kecepatan memang tidak pernah menjadi klaimnya. Supaya perbandingannya adil, saya menyamakan bentuk jendela dan skala kekerasannya persis.

Hasilnya

Spectrogram sudah live dan terbuka untuk umum, dalam bahasa Inggris dan Indonesia. Ada empat bentuk jendela, tiga skala nada, dan mode sintesis tempat Anda menyusun sinyal dari nada murni lalu melihat spektrumnya mengembalikan persis apa yang dimasukkan. Enam sampel bawaan dibangkitkan lewat kode, jadi situs tetap bisa dipakai walaupun akses mikrofon ditolak. Di desktop, transformasinya berjalan sekitar 101 kali lebih cepat dari waktu nyata. Saya membangunnya dalam satu sesi sekitar empat jam pada 6 Agustus 2026.