File Under: HTML5, JavaScript

Awesome Guitar Tab Mashup Showcases Audio Data API

Attention budding guitar players, the web just might turn into the best guitar teacher around.

The Mozilla hacks blog has details on an awesome web-based guitar tab player experiment from developer Greg Jopa. Using Mozilla’s experimental Audio Data API and the Vexflow HTML5 music notation rendering API, Jopa’s guitar tab player displays interactive sheet music that traces the notes of a song as it plays.

If you’re using Firefox 4, head over to the demo site to see the mashup in action. Other browsers won’t work, but the demo movie below shows how the guitar tab player works.

The reason this experiment only works in Firefox is because it uses Mozilla’s new Audio Data API, which gives web developers a way to interact with raw audio data in HTML5′s <video> and <audio> elements using JavaScript. With the Audio Data API, developers can read and write audio data within the browser, opening the doors for online tools like spectrum analyzers, audio remixing tools and 3D audio visualizations.

While Mozilla’s Audio Data API hasn’t been blessed by the W3C just yet, plenty of what we use on the web right now — XMLHttpRequest anyone? — started out exactly the same way. Because the web embraced XMLHttpRequest, it became a standard. Given this awesome experiment and some of the other great demos we’ve seen that use the Audio Data API, we’re really hoping the W3C adds the Audio Data API to the spec.

See Also: