spectro

? Spectro

Spectro adalah generator spektrogram audio real-time untuk web. Ini dapat memvisualisasikan suara dari mikrofon atau file audio Anda di perangkat Anda.

Penggunaan

Kepala di sini untuk mulai menggunakan Spectro.

Untuk mulai menghasilkan spektrogram, Anda bisa:

• Klik ? Rekam dari tombol MIC untuk mulai menghasilkan spektrogram dari mikrofon Anda.

  Jika Anda ingin merekam audio dari output audio perangkat Anda, Anda dapat mengaktifkan 'Stereo Mix' pada Windows atau menggunakan Blackhole pada macOS dan kemudian mengatur perangkat ini sebagai perangkat input default browser Anda.

• Klik ? Mainkan tombol file audio untuk mulai menghasilkan spektrogram dari file audio di perangkat Anda. Ini juga akan memutar file audio yang dipilih.

  Format audio apa pun yang didukung oleh browser Anda dapat dimainkan.

Spektrogram menghasilkan dari kanan ke kiri , dengan audio terbaru muncul di kanan dan tertua di sebelah kiri.

Ada juga ⚙ opsi yang tersedia untuk mengontrol penampilan spektrogram:

• ? Sensitivitas mengontrol seberapa sensitif spektrogram terhadap audio. Mengubahnya memiliki efek yang sama dengan mengubah volume audio.
• ? Kontras berlaku penskalaan logaritmik ke spektrogram untuk menambah kontras pada gambar. Mengubahnya dapat membantu menghasilkan gambar yang lebih baik tergantung pada audio yang dianalisis.
• ? Zoom mengontrol bagaimana diperbesar dalam spektrogram muncul sepanjang sumbu waktu.
• ? Min. dan maks. Kontrol frekuensi Rentang frekuensi untuk ditampilkan pada spektrogram. Frekuensi yang lebih rendah muncul di bagian bawah spektrogram, dan frekuensi yang lebih tinggi di bagian atas.
• ? Skala frekuensi mengontrol penskalaan yang akan diterapkan pada sumbu frekuensi spektrogram. 'Linear' berarti semua frekuensi diwakili secara merata, sementara 'Mel' memberikan penampilan yang lebih alami dengan memberikan lebih banyak bobot pada frekuensi yang lebih rendah.
• ? Warna mengontrol skema warna untuk menampilkan spektrogram dengan.

Anda dapat mengklik tombol ⏹ berhenti untuk berhenti menghasilkan spektrogram. Jika memutar file audio, spektrogram akan secara otomatis berhenti di ujung trek.

❓ FAQ

Apa itu spektrogram?

Spektrogram adalah gambar yang dihasilkan dari suara. Ini memvisualisasikan frekuensi yang ada dalam suara dari waktu ke waktu, dengan waktu yang diwakili sepanjang sumbu horizontal, frekuensi di sepanjang sumbu vertikal, dan kenyaringan frekuensi berdasarkan warna.

Misalnya jika Anda menghasilkan spektrogram tentang penyiaran diri Anda, Anda akan melihat garis terang di lapangan peluit.

Browser apa yang bekerja dengan spektro?

Versi terbaru Chrome, Firefox dan Safari semuanya bekerja dengan Spectro. Peramban berbasis kromium lainnya seperti versi baru Microsoft Edge juga harus berfungsi.

Bagaimana cara kerja Spectro?

Berikut adalah posting blog yang menjelaskan semuanya! Tinjauan cepat:

• Input audio dipecah menjadi bingkai 4096 sampel, yang tumpang tindih setiap 1024 sampel. Saya memilih 4096 sebagai ukuran jendela saya karena tampaknya merupakan trade-off terbaik antara waktu dan resolusi frekuensi-akhirnya saya dapat membuatnya dapat dikonfigurasi.
• Bingkai yang tumpang tindih ini kemudian berjendela menggunakan fungsi Blackman-Harris tujuh masa, yang saya putuskan seperti yang tampaknya memberikan kejelasan visual yang paling banyak.
• Jendela kemudian dijalankan melalui transformasi Fourier cepat (menggunakan JSFFT) pada pekerja web yang berdedikasi, dan norma setiap nampan frekuensi diambil sebagai dasar spektrogram.
• Data spektrogram mentah ini kemudian dimasukkan ke dalam antrian melingkar, yang memiliki kapasitas sama dengan lebar gambar spektrogram.
• Data spektrogram mentah kemudian diterjemahkan ke layar dengan WebGL, menggunakan shader untuk dengan cepat melakukan semua penskalaan, pewarnaan, dan penyesuaian gambar lainnya secara langsung pada GPU. Hanya data spektrogram mentah baru yang diunggah ke GPU setiap bingkai untuk meningkatkan kinerja alih -alih melakukan unggahan penuh.
• Panel Pengaturan menggunakan React dan Material-UI (yang memperhitungkan sebagian besar ukuran bundel?).

?perkembangan

Instal dependensi:

 npm install

Mulai Webpack-Dev-Server:

 npm start

Bangun bundel produksi:

 npm run build

Lakukan Pemeriksaan Tipe TypeScript:

 npm run type-check

Lisensi

Spectro dirilis berdasarkan ketentuan lisensi MIT.