Как подключить один или два музыкальных инструмента к API веб-аудио и разделить стереосигнал?

Question

EDIT 3:

Это была только проблема с Firefox, работает в Chrome, поэтому проблема решена, см. Ответ ниже. Спасибо Крису за вашу помощь!

EDIT 2:

Следуя совету Криса я изменил одну линию на GetUserMedia вызов, но он не работает на данный момент, может быть, я использую неправильный синтаксис, но эта функция не документирована:

if(navigator.getUserMedia){ 
    navigator.getUserMedia(
    { audio: { optional: [{ echoCancellation: false }] } } 
    ,function(stream){ init_stream(stream); } 
    ,function(err){ console.log('The following gUM error occured: ' + err); } 
); 
} 

Кроме того, теперь вы можете следовать ходу здесь:

http://jsfiddle.net/stratboy/aapafrbu/1/

EDIT 1:

Я сейчас играю на клавиатуре> миксер> behringer UCA222> mac (usb). Мой текущий код, чтобы увидеть некоторые данные, следующий. Я вижу изменение данных для канала, но не для канала, и, несмотря на то, что я делаю на микшере. В чем причина?

window.AudioContext = window.AudioContext || window.webkitAudioContext; 

navigator.getUserMedia = (navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || 
          navigator.msGetUserMedia); 


var audiocontext = new (window.AudioContext || window.webkitAudioContext)(); 
var analyser_left = audiocontext.createAnalyser(); 
var analyser_right = audiocontext.createAnalyser(); 
var splitter = audiocontext.createChannelSplitter(2); 
var index = 0; 

function init_stream(stream){ 
    window.audiosource = audiocontext.createMediaStreamSource(stream); 

    audiosource.connect(splitter); 
    splitter.connect(analyser_left,0); 
    splitter.connect(analyser_right,1); 

    listen(); 
} 

function listen(){ 
    requestAnimationFrame(listen); 

    analyser_left.fftSize = 256; 
    var leftBufferLength = analyser_left.frequencyBinCount; 
    var leftDataArray = new Uint8Array(leftBufferLength); 

    analyser_left.getByteTimeDomainData(leftDataArray); 
    $('.monitor_left').html(JSON.stringify(leftDataArray)); 


    analyser_right.fftSize = 256; 
    var rightBufferLength = analyser_right.frequencyBinCount; 
    var rightDataArray = new Uint8Array(rightBufferLength); 

    analyser_right.getByteTimeDomainData(rightDataArray); 
    $('.monitor_right').html(JSON.stringify(rightDataArray)); 

} 

if(navigator.getUserMedia){ 
    navigator.getUserMedia(
    { audio: true } 
    ,function(stream){ init_stream(stream); } 
    ,function(err){ console.log('The following gUM error occured: ' + err); } 
); 
} 

Я хотел бы сыграть свою гитару в компьютере и проанализировать звуки через API веб-аудио. Я знаю, что можно использовать микрофон, но как насчет реального инструмента?

Answer 1

Итак, исходный вопрос состоял в том, чтобы подключить дополнительные инструменты/источники в реальном времени (например, инструмент и микрофон) к веб-аудио api и проанализировать поток.

Ответ почти да: P Как писал Крис, на данный момент невозможно получить несколько инструментов, но можно разделить стереосигнал! Итак, что я делаю, идет через микшер с двумя источниками (скажем, с клавиатурой и микрофоном), поместите один на левый канал и один справа. Затем подключитесь к какой-либо аудиокарте USB (в настоящее время я использую дешевый пользователь UCA222).

Похоже, что Firefox по-прежнему не может разделить сигнал, но Chrome может это сделать, и этого достаточно для меня. Некоторый рабочий код это, и это вполне очевидно:

window.AudioContext = window.AudioContext || window.webkitAudioContext; 

navigator.getUserMedia = (navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || 
          navigator.msGetUserMedia); 


var audiocontext = new (window.AudioContext || window.webkitAudioContext)(); 
var analyser_left = audiocontext.createAnalyser(); 
var analyser_right = audiocontext.createAnalyser(); 
var splitter = audiocontext.createChannelSplitter(2); 
var index = 0; 

function init_stream(stream){ 
    window.audiosource = audiocontext.createMediaStreamSource(stream); 

    audiosource.connect(splitter); 
    splitter.connect(analyser_left,0); 
    splitter.connect(analyser_right,1); 

    listen(); 
} 

function listen(){ 
    requestAnimationFrame(listen); 

    analyser_left.fftSize = 256; 
    var leftBufferLength = analyser_left.frequencyBinCount; 
    var leftDataArray = new Uint8Array(leftBufferLength); 

    analyser_left.getByteTimeDomainData(leftDataArray); 
    $('.monitor_left').html(JSON.stringify(leftDataArray)); 


    analyser_right.fftSize = 256; 
    var rightBufferLength = analyser_right.frequencyBinCount; 
    var rightDataArray = new Uint8Array(rightBufferLength); 

    analyser_right.getByteTimeDomainData(rightDataArray); 
    $('.monitor_right').html(JSON.stringify(rightDataArray)); 

} 


if(navigator.getUserMedia){ 
    navigator.getUserMedia(
    { audio: true } 
    ,function(stream){ init_stream(stream); } 
    ,function(err){ console.log('The following gUM error occured: ' + err); } 
); 
} 

Окончательной скрипка, чтобы проверить здесь: jsfiddle.net/stratboy/aapafrbu

Вы можете видеть биты меняются во время игры.

Как веб-программист, я не понимаю, что нет событий 'onAudioSomething', которые можно поймать, когда одна заметка воспроизводится на клавиатуре. Но, может быть, это вполне логично, так как я предполагаю, что такие события часто бывают бесполезными на музыкальном произведении, так как обычно нет «нулевых очков» в усилении звука. Таким образом, можно анализировать источник путем опроса через requestAnimationFrame().

Надеется, что это помогает какому-то другой исследователю там :)

Answer 2

Да. Я делаю это все время (используйте источники без микрофона). Просто получите аудиоинтерфейс USB, который поддерживает вход гитары/инструмента.