How to Add Audio in HTML 5 {Updated}
A simple way to add audio in an HTML 5 file
HTML 5 is an advanced language that allows you to present and add interesting things to World Wide Web. When it comes to interesting elements, one cannot ignore the essence of audio in websites. While image has served as the main source of attraction for years, HTML 5 has finally come up with an option to add audio.
The audio tag in HTML 5 allows you to embed music on your webpages and sites. As many website owners and developers are fond of music, this offering enables them to get over the old-fashioned midi music and enhance the appearance of their website. What’s more exciting is that HTML 5 allows you to add interesting audio files in a couple of simple steps. With that said, here is a step-by-step tutorial on how you can add audio to HTML 5.
Making an MP3 Audio File
The first thing that you would need for adding music to your website is a music file. You can create a music file by extracting or recording a music in MP3 (.mp3) format. Although there are many other formats for music, MP3 is the most recommended one because it records music in high quality. In addition to this, the leading web browsers, such as Safari 5+ and Chrome 6+ are compatible with this format. Moreover, every Webkit-based browser supports MP3 files.
Converting your MP3 File into Various Formats
Once you have recorded the desired music file in .mp3 format, you should convert it to two other formats; namely, Vorbis (.ogg) and WAV (.wav). Doing so is important because many browsers do not support .mp3 files. For example, Opera 10.5+ and Firefox 3.6+ is compatible with .ogg format only. Alternatively, older versions of Firefox and Opera only support WAV file format.
The good news about converting music files is that many free converters are available online. You can use any genuine converter to get a copy of your MP3 music file in other formats. Once done, you should upload all the music files to your web server. You may save them in an audio file’s sub-directory; just like many designers save image in a dedicated image directory.
A list of browsers that support the HTML5 Audio tag:
| Browser | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Resources for converting your files:
Online Convert to MP3
Online Convert to WAV
Online Convert to OGG
Zamzar MP3 to OGG, MP3 and WAV
Adding the Audio Tag
After your desired audio file is saved on the server, it’s time to add the tag that will present the audio control file on your webpage. To do so, you just need to insert the following audio element where you want the file to display:
<audio controls>
After adding the audio element, you have to define the source elements. Now, as you have uploaded three audio files, you must direct the path to the files in the following way:
<source src="/audio/music.mp3"> <source src="/audio/music.ogg"> <source src="/audio/music.wav">
Entering three source elements doesn’t mean that your visitor’s browser will display the same file three times. Every browser will automatically choose the most compatible file and ignore the other two files. For instance, Chrome 6+ moves directly to the .mp3 file when it comes across an audio tag.
Adding Text to the Audio Tag
Although most of the leading browsers support atleast one of the three audio files described above, some browsers are not compatible with audio files yet. Hence, you should add a text that would give an idea to such visitors, whose browser do not support audio, about the presence of an audio element in your webpage. This can be done by adding the following tag:
<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
Apart from this, you may also offer them an opportunity to get the audio file. For this, you have to add a tag and offer the options to download an audio file. This can be done by adding the following snippet:
<p>Your browser does not support audio playback, download the file: <a href="/audio/music.mp3">MP3</a>, <a href="/audio/music.ogg">Vorbis</a>, <a href="/audio/music.wav">WAV</a>
Insert the closing audio element; i.e. </audio> to complete the procedure. Overall, the final HTML will look similar to this:
<audio controls> <source src="/audio/music.mp3"> <source src="/audio/music.ogg"> <source src="/audio/music.wav"> <p>Your browser does not support audio playback, download the file: <a href="/audio/music.mp3">MP3</a>, <a href="/audio/music.ogg">Vorbis</a>, <a href="/audio/music.wav">WAV</a> </audio>
Upon completion, you will find that an audio option on your webpage. Now your visitors can enjoy music while going through the content of your engaging website.
Photo by Tirza van Dijk on Unsplash