Can I use createMediaElementSource() without a DOM element?

user_7709450 0
Viewed 29

I am streaming PCM audio chunks by emitting them via socket.io. Then on the browser am using pcm-player to feed the the data as they are received.

I can hear the sound clearly, and everything seems fine. My issue is now that I want to visualize the sound that I am receiving, but everywhere I looked, I stumble on the same part. I need to create a AudioContext analyzer, which needs a source. The only way I can create a source, is by linking it to an <audio> tag createMediaElementSource()

My question is: How can I connect the AudioContext analyzer to the PCMPlayer source? This is what the PCMPlayer contains: enter image description here

web-audio-api pcm visualization javascript
1 Answers

Looks like the gainNode is what PCM Player uses as the final AudioNode in its internal graph.

https://github.com/samirkumardas/pcm-player/blob/ab0c17a2ec75c99abe853eacf47a0113651a7636/pcm-player.js#L50-L52

You can just use that as an input for your visualization. But if you want to do so you need to re-use the AudioContext used by PCM Player. It's not possible to connect an AudioNode created on one AudioContext to another AudioContext.

The following should work:

const analyserNode = AnalyserNode(pcmPlayer.audioCtx);

pcmPlayer.gainNode.connect(analyserNode);
user_32110460
Related