Second wavesurfer refuse to play.

[UchihaYuki]

I generated the second wavesurfer from the region selected in the first wavesurfer.

The screenshot:

The core code:

  generatedWaveSurfer: WaveSurfer
  generate() {
    const region = this.waveSurferRegions.getRegions()[0];
    const audioBuffer = this.waveSurfer.getDecodedData();
    const channels = audioBuffer.numberOfChannels;
    const peaks = [];
    for (let channel = 0; channel < channels; ++channel) {
      peaks.push(
        audioBuffer
          .getChannelData(channel)
          .slice(
            region.start * audioBuffer.sampleRate,
            region.end * audioBuffer.sampleRate
          )
      );
    }
    this.generatedWaveSurfer = WaveSurfer.create({
      container: this.generatedWaveform,
      waveColor: '#ff00ff',
      progressColor: '#000000',
      peaks,
      duration: region.end - region.start,
    })
    // this.generatedWaveSurfer.setPlaybackRate(this.speed, true);
    this.generatedWaveSurfer.on('click', () => {
      this.generatedWaveSurfer.play();
      console.log("click")
    })
  }

But when I clicked on the second wavesurfer, it didn't playback. Nothing happened, the cursor just stayed there and didn't move a bit.

I can see from the console that the click event did happen.

[katspaugh]

It's not expected to play as you didn't pass any audio data. The peaks are only used for rendering.
You can load audio via wavesurfer.loadBlob.

[UchihaYuki]

I modified my code to the following:

  generatedWaveSurfer: WaveSurfer;
  generate() {
    const region = this.waveSurferRegions.getRegions()[0];
    const audioBuffer = this.waveSurfer.getDecodedData();
    const channels = audioBuffer.numberOfChannels;
    const peaks = [];
    for (let channel = 0; channel < channels; ++channel) {
      peaks.push(
        audioBuffer
          .getChannelData(channel)
          .slice(
            region.start * audioBuffer.sampleRate,
            region.end * audioBuffer.sampleRate
          )
      );
    }
    const wave = this.audioProcessor.peaksToWave(peaks, audioBuffer.sampleRate);

    this.generatedWaveSurfer = WaveSurfer.create({
      container: this.generatedWaveform,
      waveColor: '#ff00ff',
      progressColor: '#000000',
    });
    this.generatedWaveSurfer.loadBlob(wave);
    this.generatedWaveSurfer.setPlaybackRate(this.speed, true);
    this.generatedWaveSurfer.on('click', () => {
      this.generatedWaveSurfer.play();
    });
    console.log(this.generatedWaveSurfer.getDecodedData());
  }

this.generatedWaveSurfer.getDecodedData() still returns null, but this time the cursor will move while playing, there is just no sound.

Following is the peaksToWave method:

  peaksToWave(peaks: number[][], sampleRate: number) {
    const channels = peaks.length;
    const samples = peaks[0].length
    const length = samples * channels * 2 + 44;
    const arrayBuffer = new ArrayBuffer(length);
    const dataView = new DataView(arrayBuffer);
    let pos = 0;

    // write WAVE header
    setUint32(0x46464952); // "RIFF"
    setUint32(length - 8); // file length - 8
    setUint32(0x45564157); // "WAVE"

    setUint32(0x20746d66); // "fmt " chunk
    setUint32(16); // length = 16
    setUint16(1); // PCM (uncompressed)
    setUint16(channels);
    setUint32(sampleRate);
    setUint32(sampleRate * 2 * channels); // avg. bytes/sec
    setUint16(channels * 2); // block-align
    setUint16(16); // 16-bit (hardcoded in this demo)

    setUint32(0x61746164); // "data" - chunk
    setUint32(length - pos - 4); // chunk length

    for (let offset = 0; offset < samples; ++offset) {
      for (let channel = 0; channel < channels; channel++) {
        // interleave channels
        let sample = Math.max(-1, Math.min(1, peaks[channel][offset])); // clamp
        sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
        setInt16(sample); // write 16-bit sample
      }
    }

    // create Blob
    return new Blob([arrayBuffer], { type: 'audio/wav' });

    function setInt16(data: number) {
      dataView.setInt16(pos, data, true);
      pos += 2;
    }

    function setUint16(data: number) {
      dataView.setUint16(pos, data, true);
      pos += 2;
    }

    function setUint32(data: number) {
      dataView.setUint32(pos, data, true);
      pos += 4;
    }
  }

[UchihaYuki]

I saved the Blob generated by peaksToWave to my local disk, it can be played by music player on Windows 10. But when I load it directly with wavesurfer, wavesurfer can only display its waveform. When I play it, there will be no sound.

[katspaugh]

Make sure to set a correct content type for your blob. Although it seems like you already do.

[UchihaYuki]

It's pretty strange. The wav file exported by peaksToWave can be played by music player on Windows 10. But when I drag it into Chrome and Firefox. It seems it is loaded correctly:

But when I hit the play button, only the progress bar moved, no sound.

So strange...