A visualization tool for audio waveforms
wavesurfer.js is a JavaScript library for audio waveform visualization, using web-audio and HTML5 Canvas.
The library is open source.
Questions tagged [wavesurfer.js]
181 questions
11
votes
1 answer
Using wavesurfer.js to animate a CSS property
wavesurfer.js is great for rendering a waveform from an audio file, but I'm wondering if it's possible to animate any CSS property to the amplitude/frequency of the waveform/spectrograph, being generated by wavesurfer.js? Is there a sort of variable…
Roland
- 1,908
- 4
- 21
- 34
10
votes
0 answers
How to use both Howler.js and Wavesurfer.js together
I'm new to HTML5 Audio programming and I recently used howler.js for my project which is an audio player based off of html5, I want the cool wave style seeker that wavesurfer.js offers to my player, but I can't find a way to use wavesurfer for my…
Jonathan Kumar
- 553
- 1
- 6
- 20
9
votes
3 answers
Why wavesurferjs is overflowing the parent div
i have problem with wavesurferjs
It is overflowing the parent div
It is happening for the first time and on resize of the parent div
On resize it should fit the parent div
Question: when parent div is resized waveform should adjust itself to…
EaBengaluru
- 131
- 2
- 17
- 59
9
votes
1 answer
No metadata when recording an audio webm with MediaRecorder
For my project I record user audio using MediaRecorder and it almost works fine. My problem rises when I wish to display a waveform of the user recording using Wavesurfer.js, which doesn't load my recording. Playing the recording with an Audio…
Jeahel
- 1,012
- 2
- 13
- 30
5
votes
1 answer
How to use wavesurfer.js in React?
i'm trying to render audio files using wavesurfer.js in my react app. I'm a noob and I'm wondering why I'm getting a "Container element not found" message all the time.
This is what i need to know in a nutshell.
THank you in advance!
import…
Sascha Rissling
- 253
- 5
- 15
5
votes
1 answer
With wavesurfer.js, how can I create an AudioContext AFTER loading the waveform?
I have:
this.wavesurfer = WaveSurfer.create({
container: "#wavesurfer-player",
height: 60,
barWidth: 2,
barHeight: 1, // the height of the wave
barGap: null,
scrollParent: false
});
…
Shamoon
- 41,293
- 91
- 306
- 570
5
votes
1 answer
How can I import the wavesurfer.js in my Angular 4 project?
I'm using Video.js in my Ionic 3 app for videos and audios, and all works fine.
But now, I want to use the Video.js Wavesufer plugin for audios.
I installed the plugin via npm:
npm install videojs-wavesurfer --save (plugin)
npm install wavesurfer.js…
Igor
- 645
- 4
- 16
- 37
5
votes
1 answer
Dynamically create multiple wavesurfer objects with unique names
Not sure I'm wording this correctly but here is what I'm trying to do.
I am using a function to render multiple instances of wavesurfer on a page.
Out of the box this is straight forward, as you just declare each separate instance of wavesurfer…
spice
- 1,442
- 19
- 35
4
votes
1 answer
JavaScript converting audio byte array to wav file or valid AudioBuffer
I have access to a byte array file (float32, big endian) from a URL, and I'm trying to convert it into something processable by WaveSurfer, which needs a valid ArrayBuffer, AudioBuffer, or a URL to a wav file.
The closest I've gotten is using fetch…
thedavl
- 183
- 1
- 9
4
votes
2 answers
How to avoid multiple regions being created in wavesurferjs
i'm using wavesurferjs https://wavesurfer-js.org/ with regions plugin
my problems are:
i want to avoid multiple regions being created, only 1 region i want to allow.
move of the region i want to avoid (not asked in question, fix is not so…
EaBengaluru
- 131
- 2
- 17
- 59
4
votes
1 answer
Adding webpack config to react-create-app using react-app-rewired
Warning: I'm new to this.
I'm working on a react app that uses react-create-app via yarn.
I'm trying to install react-wavesurfer using these instructions
https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls
I need to get…
beek
- 3,522
- 8
- 33
- 86
4
votes
2 answers
Wavesurfer.js is working fine, but react-wavesurfer has issues
I have run into a roadblock on my web project that uses Wavesurfer. I have installed wavesurfer.js and react-wavesurfer as node modules in my project. Wavesurfer.js seems to be working fine, but react-wavesurfer seems to be encountering issues that…
tomato
- 41
- 1
- 3
4
votes
3 answers
wavesurfer.js won't load local file
I have been working on an online application that allows the user to click through and manipulate mp3 files, and I'm trying to load local files from my computer into a wavesurfer object, but I keep getting this error in chrome:
"Access to…
Mitchell Dalzin
- 41
- 1
- 4
4
votes
1 answer
wavesufer update playbackRate without changing sound pitch
I am using wavesufer for generating waves for Audio file and other features around that.
Whenever I try to update playbackRate, sound pitch changes weirdly. I have used below few methods.
wavesurfer.audioRate =…
Vikas Vaidya
- 358
- 3
- 15
3
votes
0 answers
CORS Missing Allow Origin when using wavesurfer inside Jinja2 and FastAPI at the Google Cloud environment
I am developing one application that makes use of the wavesurfer.js package. The code is all built in HTML, and it is being rendered using Jinja2 (inside FastAPI). As the audio file is uploaded over the Google Cloud Storage, it was chosen to make a…
Altieres Schincariol
- 31
- 1