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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
<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.

Subscribe To My YouTube Channel:
<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

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
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.