html audios

About HTML audio and its attributes

HTML audio is used to embed audio files on web pages. 

The <audio> element is used to define an audio player. 

The source of the audio file is specified using the src attribute.

Here is a basic example of how to use the <audio> element:

<audio src="example.mp3">
</audio>

Here are some common attributes of the <audio> element:

src: The URL of the audio file to be played.

controls: If present, this attribute displays audio controls (play/pause, volume, etc.) in the browser.

autoplay: If present, the audio will start playing automatically as soon as the page loads.

loop: If present, the audio will play repeatedly.

muted: If present, the audio will be muted by default.

preload: Specifies whether the audio file should be loaded when the page loads. The options are "none", "metadata", and "auto".

poster: An image to be shown while the audio is loading.

Here is an example of how to use some of these attributes:

<audio src="example.mp3" controls 
autoplay
loop muted preload="auto"></audio>

This will create an audio player with controls, that will play automatically, will loop, and will be muted by default, and the audio file will be loaded automatically when the page loads.

You can also use <source> element inside the <audio> element to specify the source of audio in different formats, like this:

<audio controls>  <
source src="example.mp3" 
type="audio/mpeg">
  <source src="example.ogg" 
type="audio/ogg">
  <source src="example.ogg" 
type="audio/ogg">
  Your browser does not support the
audio element.
</audio>

This will ensure that the browser will play the first supported format of the audio file.

Note: Be aware of browser compatibility, not all the attributes will work in all browsers.

The controls attribute is used to display audio controls in the browser. 

The controls typically include a play/pause button, a volume control, and a progress bar. 

When the controls attribute is present, the browser will automatically display these controls, allowing the user to control the playback of the audio file.

Here's an example of how to use the controls attribute:

<audio src="example.mp3" 
controls></audio>

When the controls attribute is not used, the browser will not display any controls for the audio player. In this case, you can use JavaScript to create custom controls for the audio player.

Additionally, you can also customize the look and feel of the controls by applying CSS styles to the <audio> element.

It is worth noting that not all browsers implement the same set of controls and their layout, so it's best practice to test your audio player in multiple browsers to ensure that it works as expected.