CODEWITHSUNDEEP
wavesurfer.js
AJAY MAURYA
AJAY MAURYA

Reputation: 551

How to mute or amplify wavesurfer 7 left or right channel?

I spend lot of time to amplify channel audio or mute one channel left or right but no luck. some answer here Unable to mute one channel in wavesurfer.js


    function playLeft() {
        wavesurfer.backend.buffer.copyToChannel(left_zeros, 0);
        wavesurfer.backend.buffer.copyToChannel(right_data, 1);
    }

    function playRight() {
        wavesurfer.backend.buffer.copyToChannel(left_data, 0);
        wavesurfer.backend.buffer.copyToChannel(right_zeros, 1);
    }```

in wavesurfer 7 wavesurfer.backend.buffer is not prasent and 


wavesurfer.setFilters([splitter, leftGain, merger]);    wavesurfer.loadDecodedBuffer(buffer)

these funtions are not in current version wavesurfer 7.

How can i amplify or mute ony of channel?

Upvotes: 1

Views: 173

Answers (2)

hyong
hyong

Reputation: 340

My answer is based on WaveSurfer's WebAudio example at https://wavesurfer.xyz/examples/?webaudio.js.

import WaveSurfer from "wavesurfer.js";

// create media element
const audio = new Audio();
audio.src = "/examples/audio/audio.wav";

// create a WaveSurfer instance and pass the media element
const wavesurfer = WaveSurfer.create({
    "container": document.body,
    "waveColor": "black",
    "progressColor": "#888",
    "splitChannels": [{}, {"height": 0}], // hide right channel waveform
    "media": audio, // <- this is the important part
});

// create Web Audio context
const audioContext = new AudioContext();

// connect the audio to the splitter then to the output
audio.addEventListener("canplay", () => {
    // create a MediaElementSourceNode from the audio element
    const mediaNode = audioContext.createMediaElementSource(audio);
    const splitter = audioContext.createChannelSplitter(2);
    const mediaNode.connect(splitter);
    const left = 0;
    const right = 1;
    splitter.connect(audioContext.destination, left, 0);
}, {"once": true});

If amplifying a channel is desired, it can be done by chaining gain and merger nodes between splitter and audioContext.destination like below. It is based on the example at https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createChannelSplitter#examples.

...
const mediaNode = audioContext.createMediaElementSource(audio);
const splitter = audioContext.createChannelSplitter(2);
const mediaNode.connect(splitter);

// amplify the volume of the left channel only
const gainNode = audioContext.createGain();
gainNode.gain.value = 2;
splitter.connect(gainNode, 0);

// connect amplified gainNode with merger's left channel and
// splitter's intact right channel to merger's right channel
const merger = audioContext.createChannelMerger(2);
gainNode.connect(merger, 0, 0);
splitter.connect(merger, 1, 1);
merger.connect(audioContext.destination);
...

Upvotes: 0

Camilo Botero
Camilo Botero

Reputation: 1

You need to specify the backend with WebAudio; now you can use waveformRef.current.media like a backend. Here is the function:

waveSurfer.current = WaveSurfer.create({
        container: waveformRef.current,
        waveColor: '#ddd',
        progressColor: '#325788',
        height: 50,
        responsive: true,
        splitChannels: true,
        mediaControls: true,
        normalize: true,
        backend: 'WebAudio'
      });

Upvotes: 0

Related Questions