JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size




Back to list of all examples

Useful Stuff About:

Implementing HTML5 Audio

Purpose: How do you use HTML5 Audio to showcase music or any audio without the user having to install a plug-in on their computer in order for their browsers to head the audio? Use HTML5 Audio like this:

Error in loading audio.

Different browsers render the audio controller differently

If you want to create your own custom player, visit this page.

Chrome rendering

Safari rendering

At less than 264px, the time and duration don't render

Firefox rendering

Internet Explorer rendering

At less than 273px, you just get the play/pause button

<audio controls autoplay id="myAudio"><!-- you can remove the autoplay if you don't want the music to auto start -->
<source src="../media/bgmusic.mp3" type="audio/mpeg">
Your browser does not support HTML5 Audio<!--this displays if neither of the above can be played-->

Typical problems: