How to use the controls Attribute In HTML
The controls attribute in the <audio> element specifies that the browser should provide controls for playing the audio. By removing this attribute, we can hide the default audio controls.
Syntax:
<audio src="audio.mp3" controls>
Your browser does not support the audio element.
</audio>
Example: Illustration of hiding Audio controls in HTML5 Using the controls Attribute
HTML
<!DOCTYPE html><html><head> <title>Hide Audio Controls using 'controls' attribute </title></head><body> <h1>Audio Player</h1> <p>Audio with Controls:</p> <audio controls src="audiosample.mp3"> Your browser does not support the audio element. </audio> <p>Audio without Controls:</p> <audio src="audiosample.mp3"> Your browser does not support the audio element. </audio></body></html> |
Output:
How to Hide Audio Controls in HTML5 ?
In HTML5, the <audio> element embeds audio content into web pages. By default, it comes with built-in controls like play, pause, and volume adjustment. However, there might be scenarios where you want to hide these controls for a cleaner or more customized user experience. This article explores various approaches to achieve this in HTML5.
Table of Content
- Using the controls attribute
- Using CSS to Hide Controls
- Using JavaScript to Dynamically Hide Controls