When we develop a website, we often need to add sound, an audio file. Whether you are a podcaster or a train enthusiast, a small audio beacon will allow your passion to be heard. This is the subject of this little file.
HTML5 audio tag
HTML, for HyperText Markup Language, is the basic language of a website. Currently, version 5 is the most widespread. Associated with CSS, it is used to write the hypertext essential for formatting a Web page.
Its version 5 natively integrates an element intended for audio: <audio>
The base
Here is the basic tag for integrating audio into your page. As it works, you can copy/paste it directly, as it is, to test it:
<audio src="https://bigsoundbank.com/UPLOAD/mp3/1890.mp3" controls>
Your browser does not support HTML5 audio. Here is a <a href="https://bigsoundbank.com/UPLOAD/mp3/1890.mp3">link to the audio file</a> in place.
</audio>We find there :
- <audio> : the opening tag of the element.
- a source attribute (src='') containing a file in mp3 format for compatibility with all browsers.
- "controls": an attribute that allows you to display the player.
- A line of text that is displayed if the browser is not compatible with the HTML5 player.
- </audio> : the closing tag of the element.
Note that the look of the player is different depending on your terminal (mobile, tablet, computer, etc.), depending on your OS (MacOS, Windows, iOS, Android, etc.), depending on your browser (Chrome, Firefox, Safari, etc.). .), according to his version.
This code gives the following result:
Several formats
To go further, it is possible to add several audio formats, to ensure that the client's browser is compatible. The two main ones are OGG and MP3.
This code also works: you can therefore also copy/paste it directly, to test it:
<audio controls>
<source src="https://bigsoundbank.com/UPLOAD/mp3/1890.ogg" type="audio/ogg">
<source src="https://bigsoundbank.com/UPLOAD/mp3/1890.mp3" type="audio/mpeg">
Your browser does not support HTML5 audio. Here is a <a href="https://bigsoundbank.com/UPLOAD/mp3/1890.mp3">link to the audio file</a> in place.
</audio>This code gives the following result:
Attributes
Options can also be added in attributes. Here is the first line, a more complete start of the tag, the rest of the code remaining unchanged from the last example:
<audio controls autoplay loop preload="none">
- "autoplay": allows you to start the sound automatically when the page loads.
- "loop": plays the sound in a loop.
- preload="none": When this attribute is set to "none", the sound does not preload. "metadata": Indicates that only metadata (like duration) is preloaded. "auto" indicates that the entire file can be downloaded, even if it is not certain that the user will read it...
All these attributes can be absent, even "controls". In this case, the player is no longer visible, but it could be controlled in Javascript or read content automatically and/or in loops if the corresponding attributes are present.
Other formats
OGG and MP3 are great classics, but it is possible to add other formats, for example Wav:
<source src="https://bigsoundbank.com/UPLOAD/mp3/1890.wav" type="audio/wav">Conclusion
Adding a sound file is easy with this tag. Feel free to copy my first code and try some small attributes. And contact me if you have any questions.
