1 Star2 Stars3 Stars4 Stars5 Stars (229 votes, average: 5.00 out of 5)

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.
<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>

HTML5 Audio Controls *

If you want to put audio controls in the player you can use the following 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>

Auto Play *

If you want an audio file to auto play you can use the following 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>

Play A Song Over and Over Again *

If you want to play a song over and over again use the following html5 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>

Mute HTML5 Audio *

If you want to mute the audio you can use this 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>

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.

<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>

 

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

Your email address will not be published. Required fields are marked *

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