HTML5: How to define multiple media resources for media elements?

Last update on February 12 2024 12:51:54 (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 define multiple media resources for media elements</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 Ogg Vorbis audio file format -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/beach.mp3" 
type="audio/mpeg"><!-- Source tag specifying the MP3 audio file format -->
</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 multiple sources in different formats, the webpage ensures compatibility with various browsers and devices, as different browsers support different audio formats. When the browser encounters the <audio> element, it will try to use the first source it can play, falling back to the next if necessary. This ensures that the audio can be played on as many devices as possible.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page