Unable to mute left or right channel in stereo audio file

[Vijayalaxmim]

I am trying to use Audio context from wavesurfer object to play one channel at a time. But it doesnt seem to be working By using wavesurfer.backend.setFilter() and passing channelSplitter object am able to play left channel but the other one never get played.

Wavesurfer.js version(s):2.0.0-beta02

Browser version(s):Chrome latest 70.0.3538.67

Use behaviour needed to reproduce the issue:

Load a single audio mp3 file which has 2 channels .

[Vijayalaxmim]

accidentally closed

[thijstriemstra]

2.0.0-beta02

@Vijayalaxmim always try latest version.

[asystemsaus]

I have waveplayer working perfectly with left and right channels.
I can control each channel independently.
The trick is to do the following:

  // set up the dual channel controls
      const splitter = wavesurfer.backend.ac.createChannelSplitter(2);
      const merger = wavesurfer.backend.ac.createChannelMerger(2);
      const leftGain = wavesurfer.backend.ac.createGain();
      const rightGain = wavesurfer.backend.ac.createGain();
      // Here is where the wavesurfer and web audio combine.
      splitter.connect(leftGain, 0);
      splitter.connect(rightGain, 1);
      leftGain.connect(merger, 0, 0);
      rightGain.connect(merger, 0, 1);
      wavesurfer.backend.setFilters([splitter, leftGain, merger]);

Then .. to set up the volume controls.

          var volumeleft = document.querySelector('#agentvol');
          volumeleft.oninput = function() {
            var volumeleftLevel = Number(volumeleft.value);
            leftGain.gain.value = volumeleftLevel;
          };
          // customer volume controller
          var volumeright = document.querySelector('#custvol');
          volumeright.oninput = function() {
            var volumerightLevel = Number(volumeright.value);
            rightGain.gain.value = volumerightLevel;
          };

I use ionRangeSlicer to get the nice image.

  $(document).ready(function() {
  $("#agentvol").ionRangeSlider({
                              min: 0,
                              max: 1,
                              from: .8,
                              step : 0.1,
                              grid : true
                          });
                          $("#custvol").ionRangeSlider({
                            min: 0,
                            max: 1,
                            from: .8,
                            step : 0.1,
                              grid : true
                        });
});

And here is the html controls.

                       <span class="font-weight-bold" >  Agent Volume: </span> <input  data-action="agentvolume"  id="agentvol"  > </div>
                                     <div class="col-md-2">
                                     <span class="font-weight-bold" >  Caller Volume: </span>  <input  data-action="callervolume"  id="custvol"   > </div>

You will need to search for ion.rangeSlider.min.js

Get yourself the web audio plugin for Chrome. See the image. that is what you should get.

[asystemsaus]

Here is what it should look like .

The only issue I have so far is the timeline characters appear to be cutoff. Not a show stopper but something i'd like to get resolved.

[thijstriemstra]

thanks for feedback.

[Vijayalaxmim]

The same code had worked for older versions but after an upgrade does not work for latest version 2.1.3.
this.analyser is undefined.I tried creating analyser node and pass it along with other filters still it fails with other errors.

[kavishatalsania]

I am able to mute channel for the stereo audio file with backend 'WebAudio'. But If I wanted to use backend 'MediaElement', then how can I mute left or right channel as with 'MediaElement' I can not use the setFilters method.

Can someone please help me?

[mauryanm]

I want to same thing on backend 'MediaElement' and also need to Amplify audio in selected region.
Can anyone help me?

[Grimlek]

Did anyone find a resolution to make this work with Html 5 Audio and the latest wavesurfer version?