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.
How To Make The Audio Player Autoplay
To autoplay the audio, you simply add the
autoplay attribute to the HTML5
<audio controls autoplay> <source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg"> <p>If you can read this, your browser does not support the audio element.</p> </audio>
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> </audio>
controls attribute provides the controls you see: play/pause and volume.
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.
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!