Karaoke Fun with the Web Audio API Explained

Thursday’s post had a few simple examples of using the Web Audio API and HTML5 features to load sounds and process them. I got started with this following this excellent post ‘Getting Started with Web Audio API‘ along with another post I used to create the file input. Today’s post will  explain some of the details in that post.

The file input is now a built-in feature of HTML5 browsers through the <input type=”file> tag. It also allows for drag-and-drop functionality, although I didn’t add that in the post.

The basic idea of the Web Audio API is that audio played through the browser is played in an AudioContext. The audio context can play Audiobuffers, mediaElements and mediaStreams. The context can easily be connected to the destination of the browser which is usually the sound card of the device. Really I should have used a mediaElement to manipulate the audio of a longer track, since we really shouldn’t be doing complex processing in javascript.

The audio content can be manipulated either by connecting nodes together (such as a gainNode to manipulate the gain/volume of the audio) or by accessing the buffer data directly. Nodes can be chained together to form complex operations and processing. There are a ton of built in nodes available such as filters (low pass, high pass etc), gains and even convolution. Check out the spec for the full list of available processing nodes. By chaining the nodes together into a graph, complex web apps with any audio the browser supports (there is some variation here, but you’ll be safe with .wav, .mp3).

In my post I created few simple HTML buttons which called javascript functions to play and/or process the audio selected via the file input. (I added a default loaded from the server if no file was selected).

The first button (‘Play’) simply played the audio in the buffer, however it was chained to a gainNode controlled by the volume slider to the right to increase or decrease the volume.

The second button (‘Play Reverse’) accessed the audioBuffer contents directly using the code getChannelData(n) parameter of the arrayBuffer. The javascript function reverse.call reverses the contents of an array allowing us to play the audio backwards.

function reverseAudio(someBuffer){
Array.prototype.reverse.call(someBuffer.getChannelData(n) );
}

The third button (‘Play Karaoke Version’)uses the simple phase inversion/subtraction technique to cancel the centre panned contents. Again I did this by accessing the arrayBuffer contents directly, but I could just have easily used a gainNode with a default value of -1 to invert the phase before doing the subtraction.

Finally the Stop button simply calls the source.stop() function to stop playing whatever audioBuffer is currently loaded.

The javascript source file I used can be found here.

Share this post
  , ,


2 thoughts on “Karaoke Fun with the Web Audio API Explained

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.