3

I would like to create a HTML meter to display the reduction made by the compressor node.

I used this code but it does not change the metter 

compressor = context.createDynamicsCompressor();
compressor.threshold = -50;
compressor.ratio = 12;
compressor.attack = 0.003;
compressor.reduction.onchange = function () {
  var gainReduction = pluginSlot1.reduction;
  document.getElementById("meter").value = gainReduction.value;
};

This is connected to this HTML

< meter id="meter" min="0" max="100">

What do I need to do in order for it to work?

Oliver Drummond
  • 680
  • 1
  • 6
  • 19

1 Answers1

6

Here's a quick and dirty jsbin example: http://jsbin.com/ahocUt/1/edit

Unless there's something I'm missing in the spec, the reduction param doesn't fire any events. You just need to read it on-demand. In my example, that's just happening with a requestAnimationFrame loop.

The other thing you're missing is that you need to set the params with compressor.threshold.value, because compressor.threshold is actually an object.

Hope that helps.

Kevin Ennis
  • 14,226
  • 2
  • 43
  • 44
  • I've added something that was interesting for me, a way to change the color of the meter according to the compression level: `if (( -1 * reduction ) < 10){ bar.style.background = "green"; } else if (( -1 * reduction ) >= 10 && ( -1 * reduction ) < 20){ bar.style.background = "yellow"; } else { bar.style.background = "red"; }` – Oliver Drummond Sep 08 '13 at 20:21