AVWave wrong slider positioning on short audio about vue-audio-visual

[staskobzar]

Hello, thanks for reporting this.
Will try to fix it as soon as I have time.

[staskobzar]

Hi @actorius
Thanks for the details and for the sample. Finally, I do see the problem with the sample weba file.
The problem, actually, appears on the audio buffer load here : https://github.com/staskobzar/vue-audio-visual/blob/master/src/composables/useAVWaveform.ts#L112

the duration with weba is wrong. And it seems to be a problem with "weba" format. I did not observed the problem with wav or mp3 files.

I will try to see if it is possible to have a patch to fix it

[actorius]

Hello!
My apologies for long answer time.
I'm tested plugin, now bug it's not reploduced.
Issue can be closed. Thx!

[staskobzar]

@actorius
I can not re-create the problem with my short examples.
Can you send me you sound example and a code example you use to set AVWave plugin?
Thanks

[actorius]

Hello!

Sound just a blob from MediaRecorder. Here few short .weba records in ZIP (playable from browser)
Downloads.zip

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAVWaveform } from 'vue-audio-visual'

const props = defineProps({src: Blob})
const player = ref(null);
const canvas = ref(null);
const isPlay = ref(false);
const url = URL.createObjectURL(props.src);

useAVWaveform(player, canvas, {
  src: url,
  canvHeight: 40, canvWidth: 200,
  playedLineColor: "#777",
  playtimeWithMs: false,
  playtimeSlider:false,
})

var stream;

function handlePlayToggleBtnClick() {
  console.log(player.value);
  player.value.load();
  if (player.value.paused) {
    player.value.play();
  } else {
    player.value.pause(); 
  }

}
</script>

<template>
  <div>
    <div class="audio-box">
      <audio ref="player" :src="url" 
        @ended="()=> isPlay = false"
        @pause="()=> isPlay = false"
        @play="()=> isPlay = true"
        />
      <span>
        <button @click="handlePlayToggleBtnClick" class="btn-toggle-play">
          <span v-if="!isPlay"><i class="fa-solid fa-play" ></i></span>
          <span v-if="isPlay"><i class="fa-solid fa-pause"></i></span>
        </button>
      </span>
      <canvas ref="canvas" />
    </div>
  </div>
</template>
<style scoped></style>

[staskobzar]

@actorius there is a new version with a patch to fix it. Let me know if it works for you.

[actorius]

Thx!
I'll try new plugin on a days.
Give feedback about changes later