title: AudioContext panning audio of playing media
body: <p>I wonder if is there a way to pan the audio of a video with JavaScript.</p>
  
  <p>The same way you can adjust volume, I need to pan an stereo audio left to right or right to left.</p>
  
  <p>This feature would be useful for multilingual events where you can produce a video in two languages using stereo, for instance, pan english audio to left and german translation to right. Then the player could transform the stereo track into mono muting one of the languages depending on user election.</p>
  
  <p>I already implemented this feature in flash using SoundTransform class <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/SoundTransform.html#pan" rel="noreferrer">http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/SoundTransform.html#pan</a>.</p>
  
  <p>I guess SoundTransform html-equivalent is AudioContext <a href="http://www.w3.org/TR/webaudio/#AudioContext-section" rel="noreferrer">http://www.w3.org/TR/webaudio/#AudioContext-section</a>.</p>
  
  <p>May I access the audio context of a playing video?</p>
  
  <p><strong>UPDATE</strong>: After some intensive research I found out the solution. 
  Here is some javascript code I used to develop the videojs plugin videjs-stereopanner:</p>
  
  <pre><code>//Init AudioContext
  var context = new AudioContext();
  var gainL = context.createGainNode();
  var gainR = context.createGainNode();
  gainL.gain.value = 1;
  gainR.gain.value = 1;
  var merger = this.context.createChannelMerger(2);
  var splitter = this.context.createChannelSplitter(2);
  
  //Connect to source
  var source = context.createMediaElementSource(node);
  //Connect the source to the splitter
  source.connect(splitter, 0, 0);
  //Connect splitter' outputs to each Gain Nodes
  splitter.connect(gainL, 0);
  splitter.connect(gainR, 1);
  
  //Connect Left and Right Nodes to the Merger Node inputs
  //Assuming stereo as initial status
  gainL.connect(merger, 0, 0);
  gainR.connect(merger, 0, 1);
  
  //Connect Merger output to context destination
  merger.connect(context.destination, 0, 0);
  
  //Disconnect left channel and connect right to both stereo outputs
  var function = panToRight(){
      gainL.disconnect();
      gainR.connect(merger, 0, 1);
  };
  
  //Disconnect right channel and connect left to both stereo outputs
  var function = panToLeft(){
      gainR.disconnect();
      gainL.connect(merger,0,0);
  }
  
  //Restore stereo
  var function = panToStereo(){
      gainL.connect(merger, 0, 0);
      gainR.connect(merger, 0, 1);
  }
  </code></pre>
  
  <p>That works for me only in Chrome. If I try to execute this script on iPad/Safari i get an annoying sound which almost deafened me. I'm waiting till Safari implements whole Audio API.</p>