Support for multiple tracks

[JorgeRodCas]

Hello @esonderegger ,
Not an issue, just a question.

Can you please provide me an example about how to use the Peak Meter with Web Audio API playing multiple tracks at the same time?

Thanks in advance.

[esonderegger]

Hi! I think the demos from the docs page might be a good example of how to do this: https://github.com/esonderegger/web-audio-peak-meter/blob/master/docs/index.html#L182-L195

Basically, For every page, you want to only have a single web audio context:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

But then you can have as many meter nodes with corresponding meter elements as you like. This code can be run in a loop, or customized to fit your use case:

var meterElement = document.getElementById(meterId);
var audioElement = document.getElementById(audioId);
var sourceNode = ctx.createMediaElementSource(audioElement);
sourceNode.connect(ctx.destination);
var meterNode = webAudioPeakMeter.createMeterNode(sourceNode, ctx);
webAudioPeakMeter.createMeter(meterElement, meterNode, options);

And finally, you need to have a way to ensure the web audio context is started as a result of a user action. Since this library was written, browsers have begun restricting the web audio API so that the context cannot be started without an explicit user action. So there needs to be something like this that will be triggered by something like a user clicking to start playing audio.

audioElement.addEventListener('play', function () {
  ctx.resume();
});

Hope this helps! Please let me know if it works for you.

[sp2ong]

Hi,
It nice tool and works fine for one file, but I try (sorry I am not an expert javascript) to create a javascript part of code to show the peak meter for two different audio files and when click play I would like to see peak meeter to each.

<div id="my-peak-meter" style="width: 5em; height: 20em; margin: 1em 0;">
</div>
<audio id="my-audio" preload="metadata" controls="controls">
  <source src="audio_1.wav" type="audio/mpeg">
</audio>
<audio id="my-audio" preload="metadata" controls="controls">
  <source src="audio_2.wav" type="audio/mpeg">
</audio>

When I create HTML code audio with different names and use example javascript code

  var myMeterElement = document.getElementById('my-peak-meter');
  var myAudio = document.getElementById('my-audio');
  var audioCtx = new window.AudioContext();
  var sourceNode = audioCtx.createMediaElementSource(myAudio);
  sourceNode.connect(audioCtx.destination);
  var meterNode = webAudioPeakMeter.createMeterNode(sourceNode, audioCtx);
  webAudioPeakMeter.createMeter(myMeterElement, meterNode, {});
  myAudio.addEventListener('play', function() {
    audioCtx.resume();
   });

the only for the first file played show peak meter.

It will be nice to see a working example code for 2 or more files displaying peak meter.
Thank you for help

[suterma]

@sp2ong You would need two meter instances and two audio elements. Plus you would have to set the Id's uniquely, as usual.