为什么我播放的时候有2个wavesurfer.js的波形？

Question

我有：

this.wavesurfer = WaveSurfer.create({
        container: "#wavesurfer-player",
        height: 50,
        audioContext: _.get(this.$store, "state.audioContext.context"),
        waveColor: "blue",
        progressColor: "red"
      });
      this.wavesurfer.on("loading", progress => {
        this.loadingProgress = progress;
      });
      this.wavesurfer.load(this.url);

      this.wavesurfer.on("ready", () => {
        this.loadingProgress = 100;
        this.wavesurfer.un("ready");
      });

效果很好：

但是我播放的时候又出现了另外一个波形：

我做错了什么？

Answer 1

将它们设置为相同的颜色似乎解决了这个问题：

        waveColor: "blue",
        progressColor: "red"

为什么我播放的时候有2个wavesurfer.js的波形？

Why do I have 2 waveforms with wavesurfer.js when playing?

javascript

audiocontext

wavesurfer.js