Would it be possible to have volume control and mute for each of the channels?

[TD-jizhijun]

I have a recording with two channels. Can I control the volume and mute of one channel separately?

[katspaugh]

Not out of the box, but you can do it with a pan node in web audio.

Example: https://wavesurfer.xyz/examples/?webaudio.js

[TD-jizhijun]

The above is the effect I want to achieve, where channel1 and channel2 are two channels in a recording (by setting the splitChannels parameter). So can I control the volume of channel1 and channel2 separately in a recording? I don't quite understand the example you provided.

[katspaugh]

The example I linked shows how you can leverage Web Audio for more advanced stuff like what you require.

To simplify:

// Create your own media element
const audio = new Audio()
audio.controls = true
audio.src = '/examples/audio/audio.wav'

// Optionally, add the audio to the page to see the controls
document.body.appendChild(audio)

// Create a WaveSurfer instance and pass the media element
const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  media: audio, // <- this is the important part
})

// Create Web Audio context
const audioContext = new AudioContext()

// Connect the audio to Web Audio
audio.addEventListener(
  'canplay',
  () => {
    // Create a MediaElementSourceNode from the audio element
    const mediaNode = audioContext.createMediaElementSource(audio)

    // Go wild
  }
)