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

HTML5 Audio Tag to Play Audio Files in Your Website

Logo Design and Development Youngstown Ohio

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

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider buying me a drink.

Drinks

Leave a Reply

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