Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
Native audio controls already provide familiar playback actions and keyboard interaction in supported browsers. Test them instead of replacing them with custom controls without a strong reason.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<audio controls>
<source src="media/interview.ogg" type="audio/ogg">
<source src="media/interview.mp3" type="audio/mpeg">
Your browser does not support HTML audio.
</audio>Let’s Read the Code
- <audio>: The audio element creates a native sound player when controls are present.
- <source>: A source points to a media file or image choice with a type or other condition.
- controls: Controls asks the browser to provide its native audio or video player controls.
- src: Src identifies a resource path for images, frames, or media.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.
Your Turn
Move through the example without a mouse. Read each control name and current state aloud as if describing it to a friend.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- Native audio controls already provide familiar playback actions and keyboard interaction in supported browsers.
- <audio>: The audio element creates a native sound player when controls are present.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.