coding180 icon

Coding180

Audio in HTML

Audio in HTML

Tutorials > HTML > HTML Elements


With HTML, it is also possible to insert audio and video into pages with ease. For audio, we can use the audio tag, as shown in example below.

<audio controls src="music.mp3" >
Your browser does not support audio.
</audio>

In the audio tag, the src attribute points to the audio file that will be played (MP3, OGG or WAV). 

The controls attribute indicates that the audio management controls must be displayed (play, pause buttons, etc.). 
 

In addition to it, others are also worth mentioning: autoplay - to make the audio play as soon as the page is loaded;

loop - so that the audio plays over and over again.

If the browser does not support this tag, the text inside it will be displayed.

We can also insert more than one audio file (alternative format options, for example). In this case, we need to use the source tag , as in the example below.

<audio controls src="music.mp3" >
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

This time, the files will be searched in the order they appear in the list. If one is not found or cannot be loaded, the browser will immediately look for the next one.

Image below  illustrates the result of these codes, with the audio control displayed in the browser. 
 

Also note that at the top of the window (in the browser tab) an icon is displayed informing the user that this page is playing an audio.

Basic HTML - HTML codes


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel