1

There are several examples on SO about how to plot a real-time wave form of an audio signal. (For instance: Waveform visualization in JavaScript from audio.)

I have a slightly different goal, and I'm not sure if it's possible.

I am building a transcription application, and I want to plot a trace of the amplitude of the waveform (rather like this screenshot).

The thing is, I don't know how long the audio will be, so, I don't know how large my canvas needs to be if I plot it in real time.

Is the only solution to load the whole audio file and check its length before building the canvas?

Community
  • 1
  • 1

1 Answers1

0

I just made a solution similar to your question using processing.js and Chrome's Web Audio Api. If you do not want to load the entire file prior, I would suggest saving the duration of the audio file and sample rate in a database that you can call dynamically. This should be enough information to figure out the canvas size you will need before actually loading the file.

Even more so, in my application I wanted to keep the canvas size a constant width no matter the length of the audio file, so I just scaled my waveform horizontally to fit the width of my waveform window.

If you need any code samples to help you out with this let me know.

Manny
  • 190
  • 8