How to use CSS to Hide Controls In HTML

We can utilize CSS to hide the default audio controls by setting the display property to none for the audio element.

Syntax:

<style>
    audio::-webkit-media-controls {
        display: none;
    }
</style>

Example: Illustration of hiding Audio controls in HTML5 using CSS to Hide Controls

Output:

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.