Files
freeCodeCamp/guide/english/html/html5-audio/index.md

48 lines
1.8 KiB
Markdown
Raw Normal View History

2018-10-12 15:37:13 -04:00
---
title: HTML5 Audio
---
## HTML5 Audio
Before HTML5, audio files required a browser plug-in like Adobe Flash.
The <audio> element is used to embed sound content in HTML documents. It may contain one or more audio sources, represented using the src attribute or the [source](<source>) element.
2018-10-12 15:37:13 -04:00
The following code snippet adds an audio file with the filename `tutorial.ogg` or `tutorial.mp3`. The <source> element indicates alternative audio files which the browser may choose. The browser will utilize the first recognized format.
2018-10-12 15:37:13 -04:00
#### Example 1
```html
<audio controls>
<source src="tutorial.ogg" type="audio/ogg">
<source src="tutorial.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
#### Example 2
```html
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
</audio>
```
The `controls` attribute includes audio controls like play, pause, and volume. If you do not use this attribute, then no controls will be shown.
2018-10-12 15:37:13 -04:00
The `<source>` element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognized format.
2018-10-12 15:37:13 -04:00
The text between the `<audio>` and `</audio>` tags may be shown in a browser that does not support the HTML5 `<audio>` element.
The autoplay attribute will automatically play your audio file in the background. It is better practice to let users choose to play audio.
2018-10-12 15:37:13 -04:00
The preload attribute indicates what the browser should do if the player is not set to autoplay.
The loop attribute will play your audio file in a continous loop if mentioned.
2018-10-12 15:37:13 -04:00
Some browsers do not support HTML5. Find out here: https://caniuse.com/#search=audio
2018-10-12 15:37:13 -04:00
#### More Information:
https://caniuse.com/#search=audio
https://www.w3schools.com/html/html5_audio.asp
https://msdn.microsoft.com/en-us/library/gg589529(v=vs.85).aspx