1. 홈
  2. 질의 응답
  3. 브라우저에서 마이크에 액세스 - Javascript

브라우저에서 마이크에 액세스 - Javascript

2015-01-08 6 views

답변

20

여기 우리에서 getUserMedia()을 이용하여 버퍼로서 마이크로폰 오디오 캡처 - 각 버퍼의 시간 영역과 주파수 영역의 단편은 히트로 (브라우저 콘솔에서 볼 인쇄 CTRL 천이 된 I 리눅스에)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>capture microphone audio into buffer</title> 

<script type="text/javascript"> 


    var webaudio_tooling_obj = function() { 

    var audioContext = new AudioContext(); 

    console.log("audio is starting up ..."); 

    var BUFF_SIZE = 16384; 

    var audioInput = null, 
     microphone_stream = null, 
     gain_node = null, 
     script_processor_node = null, 
     script_processor_fft_node = null, 
     analyserNode = null; 

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

    if (navigator.getUserMedia){ 

     navigator.getUserMedia({audio:true}, 
      function(stream) { 
       start_microphone(stream); 
      }, 
      function(e) { 
      alert('Error capturing audio.'); 
      } 
     ); 

    } else { alert('getUserMedia not supported in this browser.'); } 

    // --- 

    function show_some_data(given_typed_array, num_row_to_display, label) { 

     var size_buffer = given_typed_array.length; 
     var index = 0; 
     var max_index = num_row_to_display; 

     console.log("__________ " + label); 

     for (; index < max_index && index < size_buffer; index += 1) { 

      console.log(given_typed_array[index]); 
     } 
    } 

    function process_microphone_buffer(event) { 

     var i, N, inp, microphone_output_buffer; 

     microphone_output_buffer = event.inputBuffer.getChannelData(0); // just mono - 1 channel for now 

     // microphone_output_buffer <-- this buffer contains current gulp of data size BUFF_SIZE 

     show_some_data(microphone_output_buffer, 5, "from getChannelData"); 
    } 

    function start_microphone(stream){ 

     gain_node = audioContext.createGain(); 
     gain_node.connect(audioContext.destination); 

     microphone_stream = audioContext.createMediaStreamSource(stream); 
     microphone_stream.connect(gain_node); 

     script_processor_node = audioContext.createScriptProcessor(BUFF_SIZE, 1, 1); 
     script_processor_node.onaudioprocess = process_microphone_buffer; 

     microphone_stream.connect(script_processor_node); 

     // --- enable volume control for output speakers 

     document.getElementById('volume').addEventListener('change', function() { 

      var curr_volume = this.value; 
      gain_node.gain.value = curr_volume; 

      console.log("curr_volume ", curr_volume); 
     }); 

     // --- setup FFT 

     script_processor_fft_node = audioContext.createScriptProcessor(2048, 1, 1); 
     script_processor_fft_node.connect(gain_node); 

     analyserNode = audioContext.createAnalyser(); 
     analyserNode.smoothingTimeConstant = 0; 
     analyserNode.fftSize = 2048; 

     microphone_stream.connect(analyserNode); 

     analyserNode.connect(script_processor_fft_node); 

     script_processor_fft_node.onaudioprocess = function() { 

     // get the average for the first channel 
     var array = new Uint8Array(analyserNode.frequencyBinCount); 
     analyserNode.getByteFrequencyData(array); 

     // draw the spectrogram 
     if (microphone_stream.playbackState == microphone_stream.PLAYING_STATE) { 

      show_some_data(array, 5, "from fft"); 
     } 
     }; 
    } 

    }(); // webaudio_tooling_obj = function() 



</script> 

</head> 
<body> 

    <p>Volume</p> 
    <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/> 

</body> 
</html>

이 코드는 당신이 다운로드 할 파일에 단순히 집계 WebSocket을을 사용하여 스트리밍하거나하는 기능을 추가 할 수있는 버퍼로 마이크 데이터를 노출하기 때문에

자사의 마이크을 활용하기로되어있는 매우 강력한 오디오 플랫폼하지만 작은 조각을 제공하기 위해 (모바일 브라우저를 포함하여) 모든 최신 브라우저에 구운 된 Web Audio API을 사용하여 표시 
var audioContext = new AudioContext();

에 대한 호출을 주목

일부 웹 오디오 API 문서

출처

2015-01-09 01:14:43

+0

안녕 @ 스캇 - stensland, 이것은 중대하다. 이 코드를 작성 했습니까? 원본 소스 또는 저장소 또는 라이센스가 있습니까? 감사! – binarymax

+4

@binarymax 예. 내 코드 ... 마음껏 약탈 할 수 있습니다. https://github.com/scottstensland/websockets-streaming-audio를 작성하면서 트릭 위에 나 자신을 가르쳤습니다. 웹 서버를 사용하여 서버에서 오디오를 스트리밍합니다. 그런 다음 웹 오디오 API를 사용하여 웹 오디오 API를 사용하여 네트워크 트래픽을 보모하기 위해 웹 작업자 삽입 광고 레이어를 사용합니다. 엄격하게 학습 연습 이었으므로 코드를 리액터해야합니다. –

+0

모든 것을 배우기위한 좋은 방법은 무엇입니까? 이, 나는 javascritp와 dom을 안다. 나는 오디오 api 및 버퍼 크기, 채널, 스트림 등을 같이가는 모든 것을 알지 못한다. –

 관련 문제

  • 관련 문제 없음^_^