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
- Upload your file to your WordPress
- If you cannot upload to your WordPress upload to something like Soundcloud
- Copy the URL path to the file.
- Below you will see a code, paste in your audio path where it says src="your audio file here"
- 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>