How to get audioContect from the React component

[MatthD]

The idea is that I want to set the volume per gain, so I should do something with the media but it seems the context already exist and splitChannels alreayd created the node.
How to play with them?

  function onReady(ws: WaveSurfer) {
    setWavesurfer(ws);
    // const media = ws.getMediaElement();
    // what to do with that ??
  }

...

        <WavesurferPlayer
          waveColor="rgb(200, 0, 200)"
          progressColor="rgb(100, 0, 100)"
          url={urlSigned}
          onReady={onReady}
          autoScroll={true}
          mediaControls={true}
          barHeight={0.8}
          dragToSeek={true}
          sampleRate={16000}
          plugins={plugins}
          minPxPerSec={100}
          splitChannels={overlay}
          height={500 / 2}
        />

[katspaugh]

If you just want to control the audio volume, you can call ws.setVolume directly. See https://wavesurfer.xyz/docs/classes/wavesurfer.default#setVolume

[MatthD]

Hello, no in fact the idea is to be able to control the volume per entry, not the. global (many entry inside one audio, visible via the Split option)
We created the ui in consequence.

Before using the react component we did created the audio element with audiocontext and we were able yo manually do that.

Is there a way yo retrieve thé audiocontext from the component ?

[katspaugh]

By default, wavesurfer doesn't use Web Audio for playback. It uses an HTMLMediaElement (so no AudioContext).

You can, however, connect the media elememt to a Web Audio graph like in this example: https://wavesurfer.xyz/examples/?webaudio.js

Alternatively (and it's not the encouraged way), you can enable Web Audio playback by passing backend="WebAudio" and then get the internal AudioContext like this:

ws.getMediaElement().getGainNode().context

[MatthD]

Tried with your example and have the same results as the example.
No sound , no read unless I click on the mute button of the controls ! strange behavior !
And with the second idea , we lost the media controls :s

[RylanBot]

getMediaElement().getGainNode().context

However, it seems that Property 'getGainNode' does not exist on type 'HTMLMediaElement'.