IE 9Google

.mp4.ogv.webm

Width Height Src Poster Loop Autoplay Mute Preload controls

The only way you can deliver music or any kind of audio recording right now over the web is using a plugin like QuickTime or RealPlayer. The trouble with plugins is that they are completely user dependent. Your end user has to download and install the right plugin. With HTML5’s tag you no longer have to worry about whether your end user has the right plugin or not. As long as you offer your files in the popular,.mp3,.wav or.ogg formats, you will be fine. Mobile devices such as android phones do not have Flash and can not play certain embeded audio or video.

Without controls With controls

Audio Formats Audio attributes Autoplay Loop Preload Controls Src

us/firefox/addon/download-youtube/ File converter Tools

Audio File: Video File: Audio js: Audio css:

Play

Audio.css body { text-align: center; } header, section, footer, aside nav, article, hgroup { display: block; } /**** *Audio ****/ nav { margin: 5px 0; }

#skinny { width: 200px; /* of whole player */ height: 40px; margin: 10px auto; padding: 5px; background: #2c2c29; border: 4px groove #00f900; border-radius: 10px; }

#audioButtons { float: left; width: 70px; height: 10px; } #defaultAudioBar { position: relative; float: left; width: 90px; /* bar + button widths, dont make bigger than skin */ height: 4px; margin: 5px auto; padding: 4px; /*progress bar will show up inside here */ border: 2px solid gray; /*border around bar */ background: #c0c0c0; border-radius: 10px; }

#progressAudioBar { position: absolute; width: 0px; /* 0 by default */ height: 4px; background: #00ff00; /*color of the progress bar, size changes as audio plays */ border-radius: 10px; } Audio.js Change maxBarSize to match #defaultAudioBar width

Code: