HTML5 Tutorial: How To Embed MP3 files

The Main Tag

To embed an audio file in HTML5 use the audio tag

 <audio>
</audio>

The Source Sub Tag

Specify the source file path between this tag

<audio>
 
  <source src="filePath.mp3" type="audio/mp3" />

</audio>

Adding Controls To Your Player

To add playback controls to your player simply add the controls property to the audio tag.

<audio controls="controls">
 
  <source src="filePath.mp3" type="audio/mp3" />

</audio>

Loop The Player

If you want your sound to be played over and over and over and over again add the loop property.

<audio loop="loop" controls="controls">
 
  <source src="filePath.mp3" type="audio/mp3" />

</audio>

Start Playing When The Page Loads

You can also catch your visitors off guard by starting to play your file a soon as your page loads. All you need to use is the autoplay property.

<audio autoplay="autoplay" loop="loop" controls="controls">
 
  <source src="filePath.mp3" type="audio/mp3" />

</audio>

Have The File Load As Soon Even When Your Visitors Have Not Clicked Play

Who doesn’t hate players that stop loading in the middle, with this feature you can load the file before your visits click play.

<audio preload="auto" autoplay="autoplay" loop="loop" controls="controls">
 
  <source src="filePath.mp3" type="audio/mp3" />

</audio>