Wavesurfer.js: Wavesurfer waveform not drawn when initial element hidden

[pyros-endgame]

I'm thinking this is a bug, but if you have the wavesurfer player loaded against a hidden element (display: none;) and then subsequently revealed the waveform doesnt show. Is there a way to have a waveform created properly, hidden and revealed with a toggle?

[katspaugh]

By default it looks up the width of the container to set the width of the canvas. So if the container is display: none, the width will be zero.

You might want to add an option to not take the container width: fillParent: false, but then it will result in the waveform to be bigger or smaller than the container.

So ideally we could add a parameter width to specify the width manually. Feel free to send a PR for this.

[katspaugh]

An easy workaround would be to call wavesurfer.drawBuffer() after you toggle the container on.
See an example here: http://codepen.io/anon/pen/NrbeVR

[pyros-endgame]

Thanks for the feedback. I figured drawBuffer() was the way to go if I was to just do a workaround. And for the most part it does suffice. I'll see what I end up doing, I may make a PR for that feature if drawBuffer() doesn't suffice for what I was intending.

[vishnu-the-developer]

I have used the above code with fillParent: false and call wavesurfer.drawBuffer() its work perfectly but the width is not responsive. I know we used fillParent: false even i changed the fillParent: false to fillParent: true it did not work. Why it so , is there any method to call wavesurfer.drawBuffer() with canvas width