เปิดใช้อินพุตเสียงบนเว็บแบบสดแล้ว

คริส วิลสัน
คริส วิลสัน

เราตื่นเต้นมากกับฟีเจอร์ใหม่ที่มีใน Chrome Canary เวอร์ชัน (23.0.1270.0) เมื่อวานนี้ ซึ่งก็คือความสามารถในการเข้าถึงเสียงสดจากไมโครโฟนหรืออินพุตเสียงอื่นๆ ใน OSX มีเวลาในการตอบสนองต่ำ (ฟีเจอร์นี้ยังไม่เปิดใช้บน Windows แต่ไม่ต้องกังวล เรากำลังดำเนินการอยู่)

ในการเปิดใช้ คุณต้องไปที่ chrome://flags/ และเปิดใช้รายการ "Web Audio Input" บริเวณด้านล่าง จากนั้นเปิดเบราว์เซอร์อีกครั้ง ตอนนี้คุณก็พร้อมที่จะเปิดเบราว์เซอร์แล้ว

คุณทดสอบอินพุตเสียงแบบเรียลไทม์ได้โดยดูสัญญาณต่างๆ ของอินพุตโดยใช้โปรแกรมแสดงข้อมูลเป็นภาพสำหรับอินพุตสด

สำหรับตัวแปลงสัญญาณเสียง Web Audio เหล่านั้น ต่อไปนี้เป็นวิธีขอสตรีมอินพุตเสียง และรับโหนดเพื่อเชื่อมต่อกับกราฟการประมวลผลที่คุณต้องการ

// success callback when requesting audio input stream
function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // Create an AudioNode from the stream.
    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia( {audio:true}, gotStream );

อินพุตเสียงที่มีเวลาในการตอบสนองต่ำมีมากมายที่เป็นไปได้ โดยเฉพาะอย่างยิ่งในด้านดนตรี คุณสามารถดูตัวอย่างสั้นๆ เกี่ยวกับวิธีใช้ประโยชน์จากตัวตรวจจับระดับเสียงง่ายๆ ที่ฉันใช้ด้วยกันได้ ลองเสียบกีตาร์หรือแค่ผิวปากใส่ไมโครโฟนไปเลยก็ได้

และตามที่ได้สัญญาไว้ ฉันได้เพิ่มเสียงสดเป็นแหล่งที่มาของอินพุตใน Vocoder ที่ฉันเขียนให้กับ Google IO เพียงเลือก "ป้อนข้อมูลสด" ใต้โมดูเลเตอร์ คุณอาจต้องปรับค่าเกนของโมดูเลเตอร์และระดับความสังเคราะห์ มีความล่าช้าเล็กน้อยเนื่องจากการประมวลผล (ไม่ใช่เพราะเวลาในการตอบสนองการป้อนข้อมูล) ตอนนี้ฉันมีอินพุตเสียงแบบสดแล้ว ถึงเวลาปรับแก้อีกรอบ

สุดท้ายนี้คุณอาจต้องการดูคอลเล็กชันการสาธิตเสียงบนเว็บของฉัน เมื่อคุณอ่านข้อมูลนี้ เราก็มีการสาธิตเสียงแบบสดเพิ่มเติม