HTML 5 Audio

HTML5 provides a standard for playing audio files.

Audio on the Internet

Until now, there is still no standard for playing audio on web pages.

Today, most audio is played through plug-ins (such as Flash). However, not all browsers have the same plug-ins.

HTML5 specifies the standard for embedding audio elements on web pages, that is, using the <audio> element.

HTML5 Audio-How it works

To play audio in HTML5, you need to use the following code:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

The control property is used to add play, pause, and volume controls.

Between <audio> and </audio> you need to insert the prompt text of the <audio> element that the browser does not support.

The <audio> element allows multiple <source> elements. The <source> element can link different audio files, and the browser will use the first supported audio file

Audio format and browser support

Currently, the <audio> element supports three audio format files: MP3, Wav, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES  YES YES

MIME type of the audio format

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio tag

label description
<audio> Defined sound content
<source> Specifies multimedia resources, which can be multiple, used in the <video> and <audio> tags