HTML Audio

HTML <audio> element is used to embed the audio with webpage. Previous versions of html did not support audio files the audios were played using different plugins but html5 provide support for audio file.

HTML Audio Tags:

Before moving ahead lets discuss some basic audio tags.

HTML audio 1
<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="../wp-content/uploads/2021/02/Horn.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Note: If your audio is in the same folder where your html document is placed than you can simply write the audio name with extension in value of src attribute.

Now lets discuss how the above code is working.

Control attribute: The control attribute in audio tag defines controls for audio such as pause play.

Note: Using source tag multiple formats of audio can be added the first recognized format would be used by browser. if any browser will not support <audio> than txt written between <audio> and </audio> will be displayed.

HTML Audio Formats

Before moving forward lets discuss few audio formats which are used commonly and supported by browsers as well.

FormatExtensionDescriptionBrowser Support
MP3.mp3MP3 files are the most popular sound format, these files are sound component of MPEG Files which are supported by all browsers.Internet Explorer, Chrome,
Fire Fox,
safari,
opera
OGG.oggIt is a compressed audio file sounds better than mp3 audio file and also contains sound tracks such as artist information.Supported by all browsers except Internet Explorer and safari
WAV.wavWAV is Microsoft windows-associated audio files but it is supported by all Operating systems. These audio files are comparatively larger than mp3 files.Supported by all browsers except Internet Explorer

These were simple HTML audio features, java script features can be added to make it more interactive.

Comments are closed.