|
|
What is HTML <audio> Tag Defines embedded sound content. The The The text between the There are three supported audio formats in HTML: MP3, WAV, and OGG. Tips and NotesTip: For video files, look at the |
How to create HTML <audio> Tag
Play a sound file:
index.html
Example:
HTML
<audio controls>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Output should be:
What Audio Format and Browser will Support for HTML <audio> Tag
Audio Format and Browser Support
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge / IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
index.html
What types of Browsers will Browser Support for HTML <audio> Tag
The numbers in the table specify the first browser version that fully supports the element.
Output should be:
Attributes for HTML <audio> Tag
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the audio will start playing as soon as it is ready |
| controls | controls | Specifies that audio controls should be displayed (such as a play/pause button etc) |
| loop | loop | Specifies that the audio will start over again, every time it is finished |
| muted | muted | Specifies that the audio output should be muted |
| preload | auto metadata none |
Specifies if and how the author thinks the audio should be loaded when the page loads |
| src | URL | Specifies the URL of the audio file |
How to add HTML <audio> autoplay Attribute
An audio file that will automatically start playing:
Definition and Usage
The autoplay attribute is a boolean attribute.
When present, the audio will automatically start playing as soon as it can do so without stopping.
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your audio file start playing automatically (but muted).
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<audio autoplay>
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio autoplay attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls autoplay>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> controls Attribute
An <audio> element with browser default controls.
Definition and Usage
The controls attribute is a boolean attribute.
When present, it specifies that audio controls should be displayed.
Audio controls should include:
- Play
- Pause
- Seeking
- Volume
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<audio controls>
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio controls attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> loop Attribute
A song that will start over again, every time it is finished:
Definition and Usage
The loop attribute is a boolean attribute.
When present, it specifies that the audio will start over again, every time it is finished.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<audio loop>
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio loop attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls loop>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> muted Attribute
A muted audio.
Definition and Usage
The muted attribute is a boolean attribute.
When present, it specifies that the audio output should be muted.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<audio muted>
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio muted attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls muted>
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> preload Attribute
Author thinks that the sound should NOT be loaded when the page loads.
Definition and Usage
The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads.
The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
Note: The preload attribute is ignored if autoplay is present.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<audio preload="auto|metadata|none">
Attribute Values
| Value | Description |
|---|---|
| auto | The author thinks that the browser should load the entire audio file when the page loads |
| metadata | The author thinks that the browser should load only metadata when the page loads |
| none | The author thinks that the browser should NOT load the audio file when the page loads |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio preload attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls preload="none">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> preload auto Attribute
| auto | The author thinks that the browser should load the entire audio file when the page loads |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio preload attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls preload="auto">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> preload metadata Attribute
| metadata | The author thinks that the browser should load only metadata when the page loads |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio preload attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls preload="metadata">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> preload none Attribute
| none | The author thinks that the browser should NOT load the audio file when the page loads |
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio preload attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio controls preload="none">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output should be:
How to add HTML <audio> src Attribute
Play a sound.
Definition and Usage
The src attribute specifies the location (URL) of the audio file.
The example above uses an Ogg file, and will work in Firefox, Opera, Chrome, and Edge. However, to play the audio file in IE or Safari, we must use an MP3 file.
To make it work in all browsers - use <source> elements inside the <audio> element. Each <source> element can link to different audio files. The browser will use the first recognized format:
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Note: The src attribute is supported in all of the major browsers, however, the file format may not be supported in all browsers!
Syntax
<audio src="URL">
Attribute Values
| Value | Description |
|---|---|
| URL | The URL of the audio file.
Possible values:
|
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The audio src attribute</h1>
<p>Click on the play button to play a sound:</p>
<audio src="https://www.w3schools.com/tags/horse.ogg" controls>
Your browser does not support the audio element.
</audio>
<p><b>Note:</b> The .ogg fileformat is not supported in IE or Safari.</p>
</body>
</html>
Output should be:
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 8 months ago |
Uploaded by: | Admin |
Views: | 9 |
Ref on: | View |