HTMLmarkup~15 mins

Audio tag basics in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Audio Tag Basics

📖 Scenario: You want to add a simple audio player to your webpage so visitors can listen to a short sound clip.

🎯 Goal: Create a basic HTML page with an audio player that plays a specific audio file.

📋 What You'll Learn

Use the HTML5 <audio> tag

Include a source file with the exact filename sound.mp3

Add controls so users can play and pause the audio

Make sure the audio player is accessible and works on all modern browsers

💡 Why This Matters

🌍 Real World

Adding audio clips to websites for music, podcasts, or sound effects is common in web design.

💼 Career

Knowing how to use the audio tag is essential for front-end developers to create interactive and multimedia-rich web pages.

Progress0 / 4 steps

Create the HTML skeleton

Write the basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head> with a <title> of "Audio Player", and an empty <body>.

HTML




    Audio Player

Need a hint?

Start with the basic HTML page structure including <!DOCTYPE html> and <html lang="en">.

Add the audio tag with source

Inside the <body>, add an <audio> tag with a src attribute set to "sound.mp3". Do not add controls yet.

HTML




    Audio Player

Need a hint?

Use the <audio> tag and set the src attribute to "sound.mp3".

Add controls to the audio tag

Modify the existing <audio> tag to include the controls attribute so users can play and pause the audio.

HTML




    Audio Player

Need a hint?

Add the controls attribute inside the <audio> tag to show play/pause buttons.

Add fallback text for accessibility

Inside the <audio> tag, add the text Your browser does not support the audio element. to show if the audio cannot play.

HTML




    Audio Player

Need a hint?

Put a short message inside the <audio> tag for browsers that do not support audio.