Using the Web Audio API with Embedded <audio> Tag

Posted on Dec 10, 2014

While trying to use the HTML5 web audio API with a music visualizer for three.js, I ran into a number of problems based on the documentation and examples I could find. Even though many of the demos are only a couple years old, many did not work or did not approach the problem using an embedded <audio> tag.

In this post, we are going to look at getting audio data as FFT directly from an embedded <audio> tag using the web audio API.

Benefits of <audio>

The reason I wanted to embed an <audio> tag is because of the native GUI controls offered to users. You can automatically include a volume slider, pause/play button, seek abilities, and you can also set it to autoplay or loop all with simple attributes in the <audio> tag.

However, most of the demos I could find were examples of loading an audio file via an ajax request, which posed some other problems.

MDN to the Rescue … Again

The best resource for solving this problem was the Mozilla Developer Network. Though many of the documents currently say “In need of technical review”, they were more helpful than anything else:

MDN Web Audio API Documentation

The Bare Minimum

There are a lot of options that you can use with the web audio API, but let’s forget all that for a moment. Here is all you need to accomplish the title of this post:

Use It

Now every time you want to use the FFT data in the dataArray, you can simply pass it to getByteFrequencyData(). This should be done on some regular interval, generally at a high speed. You could use setInterval(), but if you are using a visualizer of some kind, you should probably be triggering it along with requestAnimationFrame().

So it would look something like this.

Comments Removed

Here is the audio context code with comments removed for conciseness.

Submit a Comment

Your email address will not be published. Required fields are marked *