HTML5: How to add controls to an audio?

Last update on February 06 2024 11:32:18 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Specifies the document type as HTML -->
<html><!-- Starts the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<meta charset="utf-8"><!-- Defines the character encoding for the document as UTF-8 -->
<title>How to add controls to an audio</title><!-- Sets the title of the HTML page -->
</head>
<body><!-- Contains the visible content of the HTML document -->
<audio controls><!-- Creates an audio player with playback controls -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/beach.ogg" type="audio/ogg"><!-- Specifies the source file of the audio in Ogg Vorbis format -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/beach.mp3" type="audio/mpeg"><!-- Specifies the source file of the audio in MP3 format -->
</audio><!-- Ends the audio player -->
</body>
</html>

Explanation:

The <!DOCTYPE html> declaration specifies the document type and version of HTML.
The <html> element is the root element of the HTML document.
The <head> section contains metadata about the HTML document, such as the character encoding and title.
The <meta> tag defines metadata for the HTML document, such as the character encoding, specified here as UTF-8.
The <title> tag sets the title of the HTML page.
The <body> element contains the visible content of the HTML document.
The <audio> element creates an audio player with playback controls.
The <source> elements specify the source files of the audio in different formats (OGG and MP3).
The type attribute specifies the MIME type of the audio file format.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go To Exercise page (audio)