Doesn't seem to work in Safari

[nanandn]

Does this work in Safari. I tried the demo https://esonderegger.github.io/web-audio-peak-meter/ Doesn't do anything. Can't even hear the audio.

Anand

[esonderegger]

I'm sorry for taking so long to reply to this and thank you for flagging!

The root cause of this appears to be that using an <audio> element with the controls attribute doesn't capture the user clicking the play button as an event capable of triggering the AudioContext to resume, like it does in Chrome.

The workaround appears to be using custom controls that control the element via javascript. For example, using a <button> element that tells the audio element to play, and then listening for the play event on the audio element, as done in the examples/docs appears to be sufficient.

Example code:

<button id="start-button">Start</button>
<audio id="the-audio">
  <source src="/some_audio.mp3" type="audio/mpeg" />
</audio>
<script>
const audioCtx = new AudioContext();
const buttonElement = document.getElementById('start-button');
const audioElement = document.getElementById('the-audio');
buttonElement.addEventListener('click', () => {
  audioElement.play();
});
audioElement.addEventListener('play', () => {
  audioCtx.resume();
});
const sourceNode = audioCtx.createMediaElementSource(audioElement);
sourceNode.connect(audioCtx.destination);
</script>

[nanandn]

@esonderegger Thanks for the response. Actually, In my application, I am connecting a video element. That doesn't work in safari either. I followed the code in https://github.com/esonderegger/web-audio-peak-meter/issues/4

Seems like createScriptProcessor is deprecated (in favor of Analyzer node). Maybe that doesn't work in Safari?

Also, I want to mention another issue. Maybe I should do this in a separate thread, but... When the view (react element) in which the audio meter is rendered is resized, the audio meter does not resize accordingly. Seems like the height and width are set when it is created and does not respond to resizing properly.

BTW: Great tool. Saved a lot of time for me(in understanding the audio APIs etc..). Are you actively maintaining it and planning on making enhancements.

[suterma]

@nanandn The resizing part is addressed in https://github.com/esonderegger/web-audio-peak-meter/issues/27