Databases
StackOverflow2013
Postsdbo
POAudio data preprocessing using <audio> tag and Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAudio data preprocessing using <audio> tag and Javascript
    text
    copied!<p>Hi I'm currently working on an audio waveform editor written in pure HTML5 w/ Javascript.</p> <p>I've made some progress using the <code>&lt;audio&gt;</code>.MozAudioAvailable event from <a href="https://wiki.mozilla.org/Audio_Data_API" rel="nofollow noreferrer">Mozilla</a>, to get the data in each frame and draw them on a canvas. However with MozAudioAvailable I can only get the frame which it is NOW playing.</p> <p>As a waveform editor, my program have to seek and preprocess the data about several seconds PRIOR TO the currently playing, i.e. when playing 00:05:00, my program should probably be showing the waveform from 00:04:50 to 00:05:10, so I have to preprocess the data between 00:05:00 and 00:05:10 before they got played.</p> <p>I've searched the Internet to get a solution (not restricted to the Mozilla approaches, Chrome or Opera ones are also accepted), but got no answer. The preload property and onprogress event doesn't help. Now I'm trying to make another <code>&lt;audio&gt;</code> tag which plays the same music as the original one, but several seconds faster to get the data in advance. However the solution is quite dirty as you seen.</p> <p>I'm wondering if HTML5 group is working on some more flexible ways to deal with the multimedia objects, or if some browser development team is working on this. If you have any idea or experience on this topic, plz give me some instructions. Thx.</p> <p>UPDATE:</p> <p>Maybe I have not described my question clearly. Below is a picture taken from Audacity which may demonstrate my target.</p> <p><img src="https://i.stack.imgur.com/bI1lA.png" alt="A Screenshot from Audacity"></p> <p>The vertical line at about 1:55.10 indicates the frame currently playing. For frames to the left of the line, I can use the historical frames saved by my program. But for frames to the right of the line, which have not yet been played, I'm not able to get them before they've been played.</p> <p>An ugly solution may be to add another <code>&lt;audio&gt;</code> tag which plays faster than the original one (should be playing 1:55.90 in the screenshot) so that I can get the frames to the right of the vertical line. But that's ugly, and not easy to implement, isn't it?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload