Module 12: Audio, Video, and Embedded Content
The audio Element
Embed audio with controls, alternative sources, and a useful text fallback.
The audio element embeds sound that the browser can play. Add controls when visitors need the browser’s playback interface.
<audio controls preload="metadata">
<source src="audio/interview.mp3" type="audio/mpeg">
<source src="audio/interview.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
The browser checks the listed sources and uses one it can play. The type attribute helps it decide whether a source is likely to be supported without first fetching the entire file.
preload is a hint. none asks the browser not to preload media, metadata asks for basic information, and auto allows more data to be downloaded. The browser may make its own choice based on device, network, and policy.
Avoid autoplaying sound. Unexpected audio is disruptive and can be inaccessible. If audio is important, provide controls and a text transcript so the information is available to people who cannot hear it. The fallback text is mainly for browsers that do not support the element; it is not a transcript.