วิเคราะห์สเปกตรัมเสียง ฟรี

วิธีการทำงาน

ตัววิเคราะห์สเปกตรัมเสียงทำงานในเบราว์เซอร์ทั้งหมดโดยใช้ AnalyserNode ของ Web Audio API ซึ่งคำนวณ FFT (Fast Fourier Transform) แบบเรียลไทม์บนข้อมูลเสียงจากไฟล์หรือไมโครโฟน ทุกเฟรมวาดด้วยโค้ด Canvas 2D ที่เขียนขึ้นเอง — ไม่มีไลบรารีแสดงผล และไม่มีเสียงออกจากอุปกรณ์ของคุณ

1. 1
   เสียงถูกถอดรหัสและส่งต่อ

   เมื่อคุณโหลดไฟล์ Web Audio API จะถอดรหัสเป็น AudioBuffer และส่งผ่าน MediaElementAudioSourceNode เข้าสู่ AnalyserNode สำหรับอินพุตไมโครโฟน getUserMedia() จะจับสตรีมและส่งผ่าน MediaStreamAudioSourceNode แทน — โดยปิดการตัดเสียงสะท้อน การลดเสียงรบกวน และเกนอัตโนมัติ เพื่อให้คุณเห็นสัญญาณดิบ
2. 2
   AnalyserNode รัน FFT ทุกเฟรม

   ทุกเฟรมแอนิเมชัน (ผ่าน requestAnimationFrame) โค้ดเรียก getFloatFrequencyData() เพื่ออ่านสเปกตรัมขนาด FFT ปัจจุบันเป็น dBFS และ getFloatTimeDomainData() สำหรับแซมเปิลรูปคลื่นดิบ ขนาด FFT ปรับได้ตั้งแต่ 2048 ถึง 16384 bin ให้ความละเอียดความถี่ได้ถึงราว 2.7 Hz/bin ที่ 44.1 kHz
3. 3
   Canvas 2D เรนเดอร์มุมมองที่เลือก

   มุมมองตัววิเคราะห์จับคู่ bin ของ FFT ลงบนแกน X แบบลอการิทึมความถี่ (20 Hz–20 kHz) และแกน Y แบบ dBFS วาดสเปกตรัมเป็นเส้นระบายสี และซ้อนเส้นค้างยอดที่ค่อย ๆ ลดลง ความถี่หลักถูกระบุด้วยการประมาณค่าแบบพาราโบลารอบ bin ยอด แล้วแปลงเป็นโน้ตดนตรีแบบ equal-tempered ที่ใกล้ที่สุด (A4=440 Hz) พร้อมแสดงค่าคลาดเป็นเซนต์ มุมมองสเปกโตรแกรมเลื่อน canvas ไปทางซ้ายหนึ่งพิกเซลทุกเฟรมและวาดคอลัมน์ใหม่ด้วยไล่สีแบบ inferno มุมมองศิลปะใช้ข้อมูลความถี่หรือโดเมนเวลาความละเอียดไบต์สำหรับโหมดตกแต่งแบบแท่ง รูปคลื่น หรือวงกลม
4. 4
   ส่งออกผ่าน Canvas และ MediaRecorder

   การบันทึก PNG เรียก canvas.toBlob() เพื่อเข้ารหัสเฟรมปัจจุบัน การอัดวิดีโอใช้ canvas.captureStream(30) ร่วมกับการดึงเสียงจาก MediaStreamAudioDestinationNode ส่งเข้า MediaRecorder เพื่อสร้าง WebM หรือ MP4 การส่งออก WAV เข้ารหัสไฟล์ RIFF แบบ PCM 16 บิตจาก AudioBuffer ด้วย DataView เอง — ไม่มีตัวเข้ารหัสภายนอก

เครื่องมือที่เกี่ยวข้อง