• in
InterCourses
CoursesBlogs
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video●Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz
Media and Embedding

Embedding Audio

Mission

The Riverlight Community Hall is publishing a two-minute volunteer orientation. Add an audio player that works across browsers and gives visitors a clear way to play, pause, and read the spoken information.

What you'll build

An accessible audio player with multiple source formats, visible controls, and a transcript link for visitors who cannot or prefer not to listen.

Target

A visitor sees audio controls, and the page can offer more than one audio format plus a nearby transcript link.

One idea: audio needs an explicit listening path

<audio> embeds sound. Give it controls so people can start, pause, seek, and adjust volume. Multiple sources let the browser choose a format it supports.

html
<audio controls>
    <source src="orientation.ogg" type="audio/ogg" />
    <source src="orientation.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>
<p><a href="orientation-transcript.html">Read the orientation transcript</a></p>

MP3 plays in nearly every browser; OGG is a useful open alternative. The fallback text appears only when the browser cannot play the element.

Checkpoint

With the audio files hosted, the page shows a control bar before anything plays. The example filenames are illustrative; this informational lesson has no supplied audio files. If it starts unexpectedly, remove autoplay. If it has no usable interface, add controls or provide equivalent custom buttons.

Use the right attributes

AttributeResult
controlsShows play, pause, volume, and seek controls.
mutedStarts without sound.
loopRepeats the clip.
preloadHints how much media to fetch before playback.

Unlike video, audio has no poster, width, or height that communicates the content. For spoken material, a transcript supplies the words to people who cannot or prefer not to listen.

Payoff

The orientation is available as a deliberate, controllable audio experience instead of an inaccessible background sound.