Is it possible to update canvas-width dynamically on run-time?

[finn-dev]

Hello. First of all, thanks for your great component.

I am using this one, and now i am facing one problem. Question : is it possible to update canvas width dynamically for AvWaveForm? For example, i set canv-width as 300 for initial, and in run-time, when i click button, i want to update it as 400, etc. I tried to set flag for v-if, but it is also not helped. Is there anyway to solve this problem?

Thanks again and hope for your reply.

[staskobzar]

Hello, Unfortunately, there is no way to change canvas size when element is rendered. The values are not dynamic. If you need something simple like couple different known dimensions, then you can toggle show the elements. Use v-show in place of v-if. For example:

    <button @click="toggleBool=!toggleBool">toggle {{ toggleBool }}</button>
    <av-waveform v-show="!toggleBool"
      audio-src="file_example_MP3_1MG.mp3"
      :canv-width="180"
      :canv-height="40"
    ></av-waveform>
    <av-waveform v-show="toggleBool"
      audio-src="file_example_MP3_1MG.mp3"
      :canv-width="300"
      :canv-height="80"
    ></av-waveform>

However, there is a problem with that: the playtime will be different for both elements when they are played. Something more complicated has to be developed.

[finn-dev]

Hi Thanks for your reaching out. Just solved problem with flag, and loading sound source file again with timestamp.

Thank you.

[andreasvirkus]

@finn-dev How did you make the waveform load again with the old timestamp? For now, I'm incrementing a key in a ResizeObserver, but that resets the audio player