{"id":17841,"date":"2012-08-31T17:12:54","date_gmt":"2012-09-01T00:12:54","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17841"},"modified":"2017-04-13T17:49:44","modified_gmt":"2017-04-14T00:49:44","slug":"web-audio-api-sound-on-hover","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/web-audio-api-sound-on-hover\/","title":{"rendered":"Play Sound on Hover – Web Audio API Edition"},"content":{"rendered":"
\n

I got an email from a Notary Sojac who saw my tutorial on playing a sound on hover<\/a>. In that tutorial we had to resort to some fairly hackish behavior to get the sound to react nicely to our events. Notary Sojac had an update to make the existing code work better, but more importantly, was looking into the Web Audio API<\/a> for doing stuff like this. I didn’t even know that was a thing. Turns out it’s not controlling HTML5 audio elements, it’s deeper level access than that.<\/p>\n

The following is a guest post by Notary Sojac explaining all that.<\/p>\n<\/div>\n

We’re all impressed with the capabilities of HTML5 canvas. The idea of creating a standardized and logical way of performing 2d drawing operations opened the door to an amazing new world where one programmer could learn one language and develop amazing products that could be deployed to all relevant platforms! Think about how critical this is for a moment. Now think about who would want an amazing graphics application that has a buggy, glitchy sound system that only makes sounds moments after you clicked and sometimes forgets to make sounds all together? That’s the kind of product you get (especially<\/em> in mobile platforms) if you go the HTML5 <audio><\/code> element route. It’s better in desktop browsers, but unfortunately will never be perfected due to reasons beyond the scope of this article. But as of now, for the desktop, there is still hope. And there is hope in the future for mobile applications as well. That hope is named…<\/p>\n

Web Audio API<\/h3>\n

The web audio API is designed for high precision and low level access. You can literally write bits of data to the samples. I’m not 100% sure what a sample is, but I think it has to do with air pressure against a microphone (aka, the microphone’s driver position) at a single moment in time. That’s pretty low level if you ask me. In Google Chrome, all audio functions are handled by a separate thread to ensure non-wonkyness. <\/p>\n

On August 21st, Mozilla began making public the fact that they’re dropping their original, pioneering “Audio Data API”<\/a> and are beginning to implement Google’s “Web Audio API”<\/a> in their browser. But that means, at the time of this writing, you’ll need to use a fallback for Firefox. <\/p>\n

You can hear a great deal of good information from this Google I\/O talk by Chris Wilson:<\/p>\n