html
/

HTML Audio: Embedding Sound in Web Pages

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Audio: Embedding Sound in Web Pages

What is HTML Audio?

HTML audio allows you to embed sound files like music or voice into web pages using the <audio> tag.

Basic Syntax

HTMLRead-only
1
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Audio Attributes

AttributeDescription
controlsShows play/pause controls
autoplayStarts audio automatically
loopRepeats audio
mutedStarts audio muted
preloadHints how audio should be loaded

Supported Audio Formats

FormatType
MP3audio/mpeg
WAVaudio/wav
OGGaudio/ogg

Multiple Source Example

HTMLRead-only
1
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

Autoplay and Loop Example

HTMLRead-only
1
<audio controls autoplay loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Fallback Text

Fallback text is displayed if the browser does not support the audio element.

HTMLRead-only
1
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

Best Practices

  • Provide multiple formats for compatibility
  • Avoid autoplay (bad user experience)
  • Use controls for user interaction
  • Optimize audio file size
  • Provide fallback text

Common Mistakes

  • Using unsupported audio formats
  • Forcing autoplay with sound
  • Not including controls
  • Large audio files causing slow loading

Conclusion

HTML audio makes it easy to add sound to web pages. Proper usage ensures compatibility, performance, and a better user experience.

Try it yourself

<audio controls>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>

Test Your Knowledge

Q1
of 3

Which tag is used for audio?

A
<sound>
B
<audio>
C
<media>
D
<music>
Q2
of 3

Which attribute shows controls?

A
play
B
controls
C
visible
D
show
Q3
of 3

Which format is widely supported?

A
MP3
B
TXT
C
DOC
D
PNG

Frequently Asked Questions

What is the <audio> tag?

It is used to embed audio content in web pages.

Which format is most commonly used?

MP3 is the most widely supported format.

Should I use autoplay?

No, autoplay is generally discouraged for better user experience.

Previous

html images

Next

html video

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.