The audio tag is an HTML element that allows you to embed audio content in your web page. It’s supported by most modern web browsers, including Chrome, Firefox, Safari, and Edge.
Here’s an example of how to use the audio tag:
<audio controls> <source src="audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
In this example, we’re using the audio tag to embed an MP3 audio file in our web page. The controls attribute adds standard audio controls, such as play/pause, volume, and progress bar. The source element specifies the URL of the audio file and its MIME type. The text “Your browser does not support the audio element.” is displayed in browsers that don’t support the audio tag.
You can also use the audio tag to embed other audio formats, such as Ogg Vorbis and WAV. Here’s an example:
<audio controls> <source src="audio-file.ogg" type="audio/ogg"> <source src="audio-file.wav" type="audio/wav"> Your browser does not support the audio element. </audio>
In this example, we’re specifying two sources for the audio file: one in Ogg Vorbis format and one in WAV format. The browser will try to play the first source that it supports.
You can customize the appearance of the audio controls using CSS. For example, you can change the color of the controls:
audio::-webkit-media-controls-panel {
background-color: #333;
}
This CSS code sets the background color of the audio controls to black. Note that the appearance of the controls may vary between browsers.
