Coding is so cool create a Sync On-Line -- Play Audio on :hover

We're going to use HTML5 here, no Flash. We'll need an audio element with both MP3 (WebKit, IE) and OGG (Firefox, Opera).

We're using jQuery in this demo to make selecting things and events easier, but the .play() function is native. You probably wouldn't show the audio element, that's for demo purposes only, just remove the control attribute to not show anything.

Cloned <audio>, one for each menu item

Let's Start to Create a HTML5 Synthesizer Using CSS3 Hover Control





One <audio> for all menu items

.play() won't force the audio clip to start over unless it's finished first, not very smooth.

One <audio> for all menu items

.play() won't force the audio clip to start over unless it's finished first, not very smooth.