Comments (7)
Hello, thanks for reporting this.
Will try to fix it as soon as I have time.
from vue-audio-visual.
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
from vue-audio-visual.
Hello!
My apologies for long answer time.
I'm tested plugin, now bug it's not reploduced.
Issue can be closed. Thx!
from vue-audio-visual.
@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
from vue-audio-visual.
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>
from vue-audio-visual.
@actorius there is a new version with a patch to fix it. Let me know if it works for you.
from vue-audio-visual.
Thx!
I'll try new plugin on a days.
Give feedback about changes later
from vue-audio-visual.
Related Issues (20)
- AVWave playtime fixed position HOT 2
- waveform overwrites another when 2 wavforms are on screen. HOT 9
- [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. HOT 1
- How to set width of av-line width to 100%? HOT 2
- Hide controls? HOT 2
- Events playing, paused , how to emit them? HOT 2
- Extraneous non-props attributes (ref-link) HOT 1
- When AVWaveform's src uses ref variables, the waveform cannot be displayed normally HOT 5
- Help me!!! Why can firefox display normally but chrome cannot? HOT 6
- For vue 2, after pausing and replaying, the music plays slower in a low key. HOT 9
- Failed to decode audio array buffer: DOMException: Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data HOT 2
- CDN ? HOT 1
- How do I use audio recorded by MediaRecorder?
- Option for change slider layout from right to left HOT 4
- The slider cannot be clicked after changing source.
- The wave color is not the same that I set HOT 1
- [Vue warn]: Invalid VNode type: Symbol(v-fgt) (symbol) HOT 9
- Tailwindcss support for colors HOT 1
- AVMedia frequ type displays different colors based on broswer HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-audio-visual.