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-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

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:

1. Create an mp3 file of music with filename bgmusic.mp3. Move the file into your Websites/project#/media folder

2. Copy and paste this code where you want the audio player to exists relative to your other content.


<audio controls="controls" autoplay="autoplay" id="myAudio"><!-- you can remove the autoplay if you don't want the music to auto start -->
<source src="project#/media/bgmusic.mp3" type="audio/mp3"><!-- Change the # to the correct project number -->
</audio

Typical problems:

3. Optional CSS - if you want text to wrap around your player, copy and paste this code in your CSS file


audio {
float: right;/*or left*/
margin: 10px;
}