HTML5: How to specify the media type of the media resource?

Last update on February 12 2024 12:52:25 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify the 
media type of the media 
resource</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<audio controls><!-- Audio element with playback controls -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/beach.ogg" type="audio/ogg"><!-- Source tag specifying the URL of the Ogg Vorbis audio file with its media type -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/beach.mp3" type="audio/mpeg"><!-- Source tag specifying the URL of the MP3 audio file with its media type -->
</audio><!-- End of audio element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with an audio element for playing audio files.
The <audio> tag is used to define the audio player, and the controls attribute adds playback controls to it.
Two <source> tags are nested within the <audio> element, each specifying a different audio file source.
The src attribute in each <source> tag specifies the URL of the audio file.
The type attribute in each <source> tag specifies the MIME type of the audio file format. In this case, one source is for Ogg Vorbis format (audio/ogg), and the other is for MP3 format (audio/mpeg).
By providing the type attribute with the appropriate MIME type for each source, the browser knows how to handle the media file and can choose the appropriate one to play based on its compatibility. This ensures that the audio can be played correctly on as many devices and browsers as possible.

Live Demo:

See the Pen source-media-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page