sepans sepans - 2 months ago 21x
Javascript Question

How to do panning in HTML5-Audio/Mozilla Audio Data API

[EDIT: this question is about Mozilla Audio Data API which is no longer considered for HTML5 Audio API and not supported]

I am trying to change the padding of an audio file using Mozilla audio data API. I haven't found any way to do so. I have even tried to separate channels and pass them through different filters with different dbGain with no luck.


The key to change the balance of your audio file, is to grab the data (for example of a stereo musicfile) and change the value (amplitude) of the right and the left channel data. Accessing the right and the left channel value would be done with [i*2] and [i*2+1], because they are in a row.

Take an example at the one below (which I copied out of the HTML5 Games Book from Wiley):

function generateTone(freq, balance,sampleRate) {
  var samples = Math.round(sampleRate / freq),
  data = new Float32Array(samples *2), 
  var sample, i;

  for (i = 0; i < samples; i++) {
    sample = Math.sin(Math.PI * 2 * i / samples);
    data[i * 2] = sample * (0.5 - balance);
    data[i * 2 + 1] = sample * (0.5 + balance);

  return data;

The sinus generation you won't need in your case. Further questions? Best regards, Lukas