HTML5 Audio Tag to Play Audio Files in Your Website

Some people were asking me how do you play an audio file in your website? HTML5 has a great way for you to play your audio files.

Instructions for Embedding Audio Files with HTML5

  1. Upload your file to your WordPress
    • If you cannot upload to your WordPress upload to something like Soundcloud
  2. Copy the URL path to the file.
  3. Below you will see a code, paste in your audio path where it says src=”your audio file here”
  4. If it is an ogg or mp3 file make sure you let the tag know by selecting ogg or mp3 type.

[code]<audio controls>
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio element.
</audio>[/code]

HTML5 Audio Controls

If you want to put audio controls in the player you can use the following code.

[code]<audio controls>
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio element.
</audio>[/code]

Only cool people share!

Auto Play

If you want an audio file to auto play you can use the following code.

[code]<audio controls autoplay>
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio element.
</audio>[/code]

Play A Song Over and Over Again

If you want to play a song over and over again use the following html5 code.

[code]<audio controls loop>
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio element.
</audio>[/code]

Mute HTML5 Audio

If you want to mute the audio you can use this code.

[code]<audio controls muted>
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>[/code]

Do NOT preload the audio

By default the audio tag will preload your audio when the page loads. If you do not want the audio to preload then use the following code.

[code]<audio controls preload="none">
<source src="your audio file here" type="audio/ogg">
<source src="your audio file here" type="audio/mpeg">
Your browser does not support the audio element.
</audio>[/code]

 

HTML5 Audio Tag to Play Audio Files in Your Website was last modified: December 21st, 2015 by Maximus Mccullough
Logo Design and Development Youngstown Ohio

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.