Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AVWave wrong slider positioning on short audio #132

Closed
actorius opened this issue Apr 6, 2023 · 7 comments
Closed

AVWave wrong slider positioning on short audio #132

actorius opened this issue Apr 6, 2023 · 7 comments
Assignees
Labels
bug Something isn't working

Comments

@actorius
Copy link

actorius commented Apr 6, 2023

Hello!

Thx for creating this plugin!
I found problem with short audio records.
Slider do not go to end on short audio, you can see below on screenshot how its look on different records

image

@staskobzar
Copy link
Owner

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

@staskobzar staskobzar self-assigned this Apr 6, 2023
@staskobzar staskobzar added the bug Something isn't working label Apr 6, 2023
@staskobzar
Copy link
Owner

@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
Copy link
Author

actorius commented Apr 9, 2023

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
Copy link
Owner

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

@staskobzar
Copy link
Owner

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

@actorius
Copy link
Author

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

@actorius
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants