Coding - HTML - HTML5

HTML5 Audio Autoplay: Automatically Play Audio on Your Website

Making audio autoplay on your website is very easy with HTML5. Make that “super easy” if you already have an HTML5 audio player on your website. The audio player below is set to autoplay, as you’ve probably noticed.

Song Credit:

How To Make The Audio Player Autoplay

To autoplay the audio, you simply add the autoplay attribute to the HTML5 audio element:

<audio controls autoplay>
  <source src="" type="audio/mpeg">
  <p>If you can read this, your browser does not support the audio element.</p>

That’s it. Just make sure the source src is pointed at the correct audio file. The audio types supported are:

  • MP3 (audio/mpeg)
  • Ogg (audio/ogg)
  • Wav (audio/wav)

Having audio playing automatically could be annoying in some instances, so keep this in mind before adding music to your website. Consider the user that is in a setting where they do not want or expect audio to be playing, such as work or a library.

More Audio Player Info

<audio controls autoplay>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.wav" type="audio/wav">
  <p>If you can read this, your browser does not support the audio element.</p>

The controls attribute provides the controls you see: play/pause and volume.

The source element allows you to have multiple elements pointing to different formats of your audio file. The player will play the first format that is supported by the user’s browser.

Also, if you need a refresher, we have a series on HTML5 starting with Introduction to HTML5, and if you’re completely new to web development, check out our Introduction to Web Development.

If you have any questions or comments, please post them below. If you enjoyed this quick tutorial, please use the social buttons to share it with your friends!

About the author

Chris Alexander is the founder of He is an entreprenuer, web developer, father and husband. Follow Chris on Twitter @SyntaxxxBlog

Share this post

Leave a Comment

Subscribe To Our Newsletter