Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to mute left or right channel in stereo audio file #1497

Closed
Vijayalaxmim opened this issue Oct 23, 2018 · 9 comments
Closed

Unable to mute left or right channel in stereo audio file #1497

Vijayalaxmim opened this issue Oct 23, 2018 · 9 comments

Comments

@Vijayalaxmim
Copy link

Vijayalaxmim commented Oct 23, 2018

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 Vijayalaxmim changed the title able to mute left or right channel in stereo audio file Unable to mute left or right channel in stereo audio file Oct 23, 2018
@Vijayalaxmim Vijayalaxmim reopened this Oct 23, 2018
@Vijayalaxmim
Copy link
Author

accidentally closed

@thijstriemstra
Copy link
Contributor

thijstriemstra commented Oct 24, 2018

2.0.0-beta02

@Vijayalaxmim always try latest version.

@asystemsaus
Copy link

asystemsaus commented Nov 4, 2018

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.

webaudio

@asystemsaus
Copy link

Here is what it should look like .
waveplayer2

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
Copy link
Contributor

thanks for feedback.

@Vijayalaxmim
Copy link
Author

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
Copy link

kavishatalsania commented Sep 27, 2019

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
Copy link

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

@Grimlek
Copy link

Grimlek commented Jun 7, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants