Невозможно отключить один канал в wavesurfer.js

Question

Я потратил несколько часов, пытаясь выбрать один канал из стереофонического mp3-файла, загруженного с wavesurfer.js.

Answer 1

Я наконец-то нашел решение, которое, вероятно, не самое лучшее, но оно работает без проблем.

Идея состоит в том, чтобы просто заменить буфер канала, который я хочу отключить, нулями. Для этого я сначала сохраню исходные данные с wavesurfer.backend.buffer.getChannelData(0) и создать массив нулей одинаковой длины. Затем я заменяю содержимое канала, используя wavesurfer.backend.buffer.copyToChannel(left_zeros, 0),

Работает как шарм!

    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'darkorange',
        progressColor: 'purple',
        splitChannels: true,
        height: 150,
    });

    left_data = null;
    left_zeros = null;
    right_data = null;
    right_zeros = null;

    wavesurfer.load('./stereo-file.mp3');

    wavesurfer.on('ready', function () {



        left_data = wavesurfer.backend.buffer.getChannelData(0).map(d => {
            return d;
        });
        left_zeros = left_data.map(d => {
            return 0.;
        });

        right_data = wavesurfer.backend.buffer.getChannelData(1).map(d => {
            return d;
        });
        right_zeros = right_data.map(d => {
            return 0.;
        });

    });

    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);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<div id="waveform"></div>

<p align="center">
    <button class="btn btn-primary" onclick="playLeft()">
        <i class="glyphicon glyphicon-play"></i>
        Left
    </button>
    <button class="btn btn-primary" onclick="playRight()">
        <i class="glyphicon glyphicon-play"></i>
        Right
    </button>
    <button class="btn btn-primary" onclick="wavesurfer.playPause()">
        <i class="glyphicon glyphicon-play"></i>
        Play
    </button>
</p>

Answer 2

    export class PlayerComponent implements OnInit {
      wavesurfer: WaveSurfer;
      leftGain: any;
      rightGain: any;
      stateLeft: number = 1;
      stateRight: number = 1;

      constructor() { }

      ngOnInit() {
        let audiofile = '../assets/1.mp3';
        this.wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor : 'blue',
          progressColor: 'purple',
          splitChannels: true,
          responsive: true,
          normalize: true
        });

        const splitter = this.wavesurfer.backend.ac.createChannelSplitter(2);
        const merger = this.wavesurfer.backend.ac.createChannelMerger(2);
        this.leftGain = this.wavesurfer.backend.ac.createGain();
        this.rightGain = this.wavesurfer.backend.ac.createGain();
        splitter.connect(this.leftGain, 0);
        splitter.connect(this.rightGain, 1);
        this.leftGain.connect(merger, 0, 0);
        this.rightGain.connect(merger, 0, 1);
        this.wavesurfer.backend.setFilters([splitter, this.leftGain, merger]);
        this.wavesurfer.load(audiofile);
        this.wavesurfer.on('play', () => {this.wavesurfer.playPause()});
        this.wavesurfer.on('error', (msg) => {
          console.log(msg);
      });
    }

      play() {
          this.wavesurfer.playPause();
      }
      right() {
            if(this.stateRight == 1)
            this.stateRight = 0;
            else
            this.stateRight = 1;
            this.rightGain.gain.value = this.stateRight;
      }
      left()
      {
            if(this.stateLeft == 1)
            this.stateLeft = 0;
            else
            this.stateLeft = 1;
            this.leftGain.gain.value = this.stateLeft;
          }
    }



<div id="waveform"></div>
<button class="btn btn-success" (click)="play()">Play/Pause</button>
<button class="btn btn-success" (click)="left()">left</button>
<button class="btn btn-success" (click)="right()">right</button>