2017-01-30 53 views
1

我使用getAudioTracks()從視頻元素獲取音頻。然後,我需要放大(增加音量)這個audioTrack,然後我將它添加到畫布上,使用0123rt,並使用webrtc將其同時流出。使用webrtc在流之前放大MediaStreamTrack(音頻)

有沒有一種方法可以在客戶端使用javascript做到這一點?

回答

2

我制定了一個解決方案。對於任何需要同樣的事情:

  // supposing we have the getUserMedia stream and a canvas 
      // we want to stream the canvas content and the 
      // amplified audio from user's microphone 

      var s = canvas.captureStream(); 

      var context = new AudioContext(); 

      var gainNode = context.createGain(); 
      gainNode.gain.value = 1; 

      // compress to avoid clipping 
      var compressor = context.createDynamicsCompressor(); 
      compressor.threshold.value = -30; 
      compressor.knee.value = 40; 
      compressor.ratio.value = 4; 
      compressor.reduction.value = -10; 
      compressor.attack.value = 0; 
      compressor.release.value = 0.25; 

      var destination = context.createMediaStreamDestination(); 

      var input = context.createMediaStreamSource(stream); 

      input.connect(compressor); 
      compressor.connect(gainNode); 
      gainNode.connect(destination); 

      var audioTracks = destination.stream.getAudioTracks(); 

      // use a slider to alter the value of amplification dynamically 
      var rangeElement = document.getElementById("amplifierSlider"); 
      rangeElement .addEventListener("input", function() { 
       gainNode.gain.value = parseFloat(rangeElement .value); 
      }, false); 

      for (var i=0; i < audioTracks.length; i++) { 
       s.addTrack(audioTracks[i]); 
      } 

      // stream the canvas with the added audio tracks 

https://jsfiddle.net/Thanos_Sar/Lt00nr8g/