spectro

- สเปกตรัม

Spectro เป็นเครื่องกำเนิดเสียงแบบเรียลไทม์สำหรับเว็บ สามารถมองเห็นเสียงจากไมโครโฟนหรือไฟล์เสียงของคุณบนอุปกรณ์ของคุณ

การใช้งาน

มุ่งหน้าไปที่นี่เพื่อเริ่มใช้ Spectro

ในการเริ่มสร้างสเปกโตรแกรมคุณสามารถ:

• คลิกที่ ? บันทึกจากปุ่ม MIC เพื่อเริ่มสร้างสเปกโตรแกรมจากไมโครโฟนของคุณ

  หากคุณต้องการบันทึกเสียงจากเอาต์พุตเสียงของอุปกรณ์คุณสามารถเปิดใช้งาน 'สเตอริโอผสม' บน Windows หรือใช้ Blackhole บน MacOS แล้วตั้งค่าอุปกรณ์นี้เป็นอุปกรณ์อินพุตเริ่มต้นของเบราว์เซอร์

• คลิกที่ ? เล่นปุ่มไฟล์เสียง เพื่อเริ่มสร้าง spectrogram จากไฟล์เสียงบนอุปกรณ์ของคุณ สิ่งนี้จะเล่นไฟล์เสียงที่เลือก

  รูปแบบเสียงใด ๆ ที่รองรับโดยเบราว์เซอร์ของคุณสามารถเล่นได้

สเปคโทรกรัมสร้างจาก ขวาไปซ้าย โดยมีเสียงล่าสุดปรากฏขึ้นทางด้านขวาและเก่าที่สุดทางด้านซ้าย

นอกจากนี้ยังมี ตัวเลือก⚙ พร้อมกันเพื่อควบคุมลักษณะที่ปรากฏของ spectrogram:

• - ความไว ควบคุมความไวของสเปกโตรแกรมต่อเสียงได้อย่างไร การเปลี่ยนมันมีผลเช่นเดียวกับการเปลี่ยนปริมาตรของเสียง
• - ความคมชัด ใช้การปรับสเกลลอการิทึมกับสเปกโตรแกรมเพื่อเพิ่มความคมชัดให้กับภาพ การเปลี่ยนมันสามารถช่วยสร้างภาพที่ดีขึ้นขึ้นอยู่กับเสียงที่ถูกวิเคราะห์
• - ซูม ควบคุมว่าการซูมในสเปกโตรแกรมจะปรากฏขึ้นตามแกนเวลาอย่างไร
• - นาที. และสูงสุด การควบคุม ความถี่ ช่วงของความถี่ที่จะแสดงบนสเปกโตรแกรม ความถี่ที่ต่ำกว่าจะปรากฏที่ด้านล่างของสเปกโตรแกรมและความถี่ที่สูงขึ้นที่ด้านบน
• - มาตราส่วนความถี่ ควบคุมการปรับขนาดเพื่อใช้กับแกนความถี่ของสเปกโตรแกรม 'linear' หมายถึงความถี่ทั้งหมดจะแสดงอย่างสม่ำเสมอในขณะที่ 'mel' ให้ลักษณะที่เป็นธรรมชาติมากขึ้นโดยให้น้ำหนักมากขึ้นถึงความถี่ที่ต่ำกว่า
• - สี ควบคุมโทนสีเพื่อแสดงสเปกโตรแกรมด้วย

คุณสามารถคลิกปุ่ม หยุด⏹ เพื่อหยุดสร้างสเปกโตรแกรม หากเล่นไฟล์เสียง Spectrogram จะหยุดโดยอัตโนมัติในตอนท้ายของแทร็กโดยอัตโนมัติ

❓คำถามที่พบบ่อย

Spectrogram คืออะไร?

Spectrogram เป็นภาพที่เกิดจากเสียง มันแสดงให้เห็นถึงความถี่ที่มีอยู่ในเสียงเมื่อเวลาผ่านไปตามเวลาที่แสดงตามแนวแกนแนวนอนความถี่ตามแนวแกนแนวตั้งและความดังของความถี่ด้วยสี

ตัวอย่างเช่นถ้าคุณจะสร้างสเปกโตรแกรมของตัวเองผิวปากคุณจะเห็นเส้นสว่างที่สนามของนกหวีด

สเปกตรัมเบราว์เซอร์ใดทำงานด้วย?

รุ่นล่าสุดของ Chrome, Firefox และ Safari ทำงานร่วมกับ Spectro เบราว์เซอร์ที่ใช้โครเมียมอื่น ๆ เช่น Microsoft Edge รุ่นใหม่ก็ควรใช้งานได้เช่นกัน

Spectro ทำงานอย่างไร?

นี่คือโพสต์บล็อกที่อธิบายทั้งหมด! ภาพรวมอย่างรวดเร็ว:

• อินพุตเสียงถูกแบ่งออกเป็นเฟรมของตัวอย่าง 4096 ตัวอย่างซึ่งทับซ้อนกันทุก 1024 ตัวอย่าง ฉันเลือก 4096 เป็นขนาดหน้าต่างของฉันเนื่องจากดูเหมือนว่าเป็นการแลกเปลี่ยนที่ดีที่สุดระหว่างเวลาและความละเอียดความถี่-ในที่สุดฉันอาจทำให้สามารถกำหนดค่าได้
• เฟรมที่ทับซ้อนกันเหล่านี้จะถูกหน้าต่างโดยใช้ฟังก์ชั่น Blackman-Harris เจ็ดเทอมซึ่งฉันตัดสินใจเพราะดูเหมือนว่าจะให้ความชัดเจนมากที่สุด
• จากนั้นหน้าต่างจะถูกเรียกใช้ผ่านการแปลงฟูริเยร์ที่รวดเร็ว (โดยใช้ JSFFT) ในผู้ปฏิบัติงานบนเว็บเฉพาะและบรรทัดฐานของถังความถี่แต่ละอันจะถูกนำมาเป็นพื้นฐานของสเปกโตรแกรม
• ข้อมูลสเปคโตรรามดิบนี้จะถูกแทรกลงในคิวแบบวงกลมซึ่งมีความจุเท่ากับความกว้างของภาพสเปกโตรแกรม
• จากนั้นข้อมูลสเปคโทรแกรมดิบจะถูกแสดงบนหน้าจอด้วย WebGL โดยใช้ shader เพื่อทำการปรับขนาดการปรับระดับและการปรับภาพอื่น ๆ อย่างรวดเร็วบน GPU มีเพียงข้อมูลสเปคโตรราม RAW ใหม่เท่านั้นที่อัปโหลดไปยัง GPU แต่ละเฟรมเพื่อปรับปรุงประสิทธิภาพแทนที่จะทำการอัปโหลดเต็มรูปแบบ
• แผงการตั้งค่าใช้ React และ Material-UI (บัญชีใดสำหรับขนาดชุดส่วนใหญ่?)

?การพัฒนา

ติดตั้งการพึ่งพา:

 npm install

เริ่ม WebPack-Dev-Server:

 npm start

สร้างชุดการผลิต:

 npm run build

ดำเนินการตรวจสอบประเภท typescript:

 npm run type-check

ใบอนุญาต

Spectro เปิดตัวภายใต้เงื่อนไขของใบอนุญาต MIT