<source>

<source> supplies candidates to <picture>, <audio>, or <video>. It is void, with no content or end tag. The attributes differ between image and timed-media contexts.

A media source in context

This source provides an embedded tone with a WAV type hint. The player supplies controls; source itself is not visible.

Observe source behaviorLink

HTML and CSS

HTML

<p>Sound description: one short tone.</p>
<audio controls preload="metadata" aria-label="Source selection demonstration"><source src="data:audio/wav;base64,UklGRsQPAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YaAPAAAAAKUC+gS5BqwHtwfYBioF4AI+AJb9N/to+WH4QPgK+af65vyD/y0ClwR2BpEHxwcRB4YFUwO8AA/+nPuu+YD4NPjV+E/6dfwG/7QBLwQsBm4HzwdDB9wFwwM4AYr+Bvz7+af4MPin+Pv5BvyK/jgBwwPcBUMHzwduBywGLwS0AQb/dfxP+tX4NPiA+K75nPsP/rwAUwOGBREHxweRB3YGlwQtAoP/5vyn+gr5QPhh+Gj5N/uW/T4A4AIqBdgGtwesB7kG+gSlAgAAW/0G+0f5VPhJ+Cj51vog/cL/agLJBJgGnwfAB/YGWQUaA30A0/1p+4r5b/g5+O/4evqt/ET/8QFkBFIGgAfMBysHsQWLA/oATP7R+9T5kvgx+L34JPo9/Mj+dgH6AwUGWQfQB1kHBQb6A3YByP49/CT6vfgx+JL41PnR+0z++gCLA7EFKwfMB4AHUgZkBPEBRP+t/Hr67/g5+G/4ivlp+9P9fQAaA1kF9gbAB58HmAbJBGoCwv8g/db6KPlJ+FT4R/kG+1v9AAClAvoEuQasB7cH2AYqBeACPgCW/Tf7aPlh+ED4Cvmn+ub8g/8tApcEdgaRB8cHEQeGBVMDvAAP/pz7rvmA+DT41fhP+nX8Bv+0AS8ELAZuB88HQwfcBcMDOAGK/gb8+/mn+DD4p/j7+Qb8iv44AcMD3AVDB88HbgcsBi8EtAEG/3X8T/rV+DT4gPiu+Zz7D/68AFMDhgURB8cHkQd2BpcELQKD/+b8p/oK+UD4Yfho+Tf7lv0+AOACKgXYBrcHrAe5BvoEpQIAAFv9BvtH+VT4Sfgo+db6IP3C/2oCyQSYBp8HwAf2BlkFGgN9ANP9afuK+W/4Ofjv+Hr6rfxE//EBZARSBoAHzAcrB7EFiwP6AEz+0fvU+ZL4Mfi9+CT6PfzI/nYB+gMFBlkH0AdZBwUG+gN2Acj+Pfwk+r34MfiS+NT50ftM/voAiwOxBSsHzAeAB1IGZATxAUT/rfx6+u/4Ofhv+Ir5afvT/X0AGgNZBfYGwAefB5gGyQRqAsL/IP3W+ij5SfhU+Ef5Bvtb/QAApQL6BLkGrAe3B9gGKgXgAj4Alv03+2j5YfhA+Ar5p/rm/IP/LQKXBHYGkQfHBxEHhgVTA7wAD/6c+675gPg0+NX4T/p1/Ab/tAEvBCwGbgfPB0MH3AXDAzgBiv4G/Pv5p/gw+Kf4+/kG/Ir+OAHDA9wFQwfPB24HLAYvBLQBBv91/E/61fg0+ID4rvmc+w/+vABTA4YFEQfHB5EHdgaXBC0Cg//m/Kf6CvlA+GH4aPk3+5b9PgDgAioF2Aa3B6wHuQb6BKUCAABb/Qb7R/lU+En4KPnW+iD9wv9qAskEmAafB8AH9gZZBRoDfQDT/Wn7ivlv+Dn47/h6+q38RP/xAWQEUgaAB8wHKwexBYsD+gBM/tH71PmS+DH4vfgk+j38yP52AfoDBQZZB9AHWQcFBvoDdgHI/j38JPq9+DH4kvjU+dH7TP76AIsDsQUrB8wHgAdSBmQE8QFE/638evrv+Dn4b/iK+Wn70/19ABoDWQX2BsAHnweYBskEagLC/yD91voo+Un4VPhH+Qb7W/0AAKUC+gS5BqwHtwfYBioF4AI+AJb9N/to+WH4QPgK+af65vyD/y0ClwR2BpEHxwcRB4YFUwO8AA/+nPuu+YD4NPjV+E/6dfwG/7QBLwQsBm4HzwdDB9wFwwM4AYr+Bvz7+af4MPin+Pv5BvyK/jgBwwPcBUMHzwduBywGLwS0AQb/dfxP+tX4NPiA+K75nPsP/rwAUwOGBREHxweRB3YGlwQtAoP/5vyn+gr5QPhh+Gj5N/uW/T4A4AIqBdgGtwesB7kG+gSlAgAAW/0G+0f5VPhJ+Cj51vog/cL/agLJBJgGnwfAB/YGWQUaA30A0/1p+4r5b/g5+O/4evqt/ET/8QFkBFIGgAfMBysHsQWLA/oATP7R+9T5kvgx+L34JPo9/Mj+dgH6AwUGWQfQB1kHBQb6A3YByP49/CT6vfgx+JL41PnR+0z++gCLA7EFKwfMB4AHUgZkBPEBRP+t/Hr67/g5+G/4ivlp+9P9fQAaA1kF9gbAB58HmAbJBGoCwv8g/db6KPlJ+FT4R/kG+1v9AAClAvoEuQasB7cH2AYqBeACPgCW/Tf7aPlh+ED4Cvmn+ub8g/8tApcEdgaRB8cHEQeGBVMDvAAP/pz7rvmA+DT41fhP+nX8Bv+0AS8ELAZuB88HQwfcBcMDOAGK/gb8+/mn+DD4p/j7+Qb8iv44AcMD3AVDB88HbgcsBi8EtAEG/3X8T/rV+DT4gPiu+Zz7D/68AFMDhgURB8cHkQd2BpcELQKD/+b8p/oK+UD4Yfho+Tf7lv0+AOACKgXYBrcHrAe5BvoEpQIAAFv9BvtH+VT4Sfgo+db6IP3C/2oCyQSYBp8HwAf2BlkFGgN9ANP9afuK+W/4Ofjv+Hr6rfxE//EBZARSBoAHzAcrB7EFiwP6AEz+0fvU+ZL4Mfi9+CT6PfzI/nYB+gMFBlkH0AdZBwUG+gN2Acj+Pfwk+r34MfiS+NT50ftM/voAiwOxBSsHzAeAB1IGZATxAUT/rfx6+u/4Ofhv+Ir5afvT/X0AGgNZBfYGwAefB5gGyQRqAsL/IP3W+ij5SfhU+Ef5Bvtb/QAApQL6BLkGrAe3B9gGKgXgAj4Alv03+2j5YfhA+Ar5p/rm/IP/LQKXBHYGkQfHBxEHhgVTA7wAD/6c+675gPg0+NX4T/p1/Ab/tAEvBCwGbgfPB0MH3AXDAzgBiv4G/Pv5p/gw+Kf4+/kG/Ir+OAHDA9wFQwfPB24HLAYvBLQBBv91/E/61fg0+ID4rvmc+w/+vABTA4YFEQfHB5EHdgaXBC0Cg//m/Kf6CvlA+GH4aPk3+5b9PgDgAioF2Aa3B6wHuQb6BKUCAABb/Qb7R/lU+En4KPnW+iD9wv9qAskEmAafB8AH9gZZBRoDfQDT/Wn7ivlv+Dn47/h6+q38RP/xAWQEUgaAB8wHKwexBYsD+gBM/tH71PmS+DH4vfgk+j38yP52AfoDBQZZB9AHWQcFBvoDdgHI/j38JPq9+DH4kvjU+dH7TP76AIsDsQUrB8wHgAdSBmQE8QFE/638evrv+Dn4b/iK+Wn70/19ABoDWQX2BsAHnweYBskEagLC/yD91voo+Un4VPhH+Qb7W/0AAKUC+gS5BqwHtwfYBioF4AI+AJb9N/to+WH4QPgK+af65vyD/y0ClwR2BpEHxwcRB4YFUwO8AA/+nPuu+YD4NPjV+E/6dfwG/7QBLwQsBm4HzwdDB9wFwwM4AYr+Bvz7+af4MPin+Pv5BvyK/jgBwwPcBUMHzwduBywGLwS0AQb/dfxP+tX4NPiA+K75nPsP/rwAUwOGBREHxweRB3YGlwQtAoP/5vyn+gr5QPhh+Gj5N/uW/T4A4AIqBdgGtwesB7kG+gSlAgAAW/0G+0f5VPhJ+Cj51vog/cL/agLJBJgGnwfAB/YGWQUaA30A0/1p+4r5b/g5+O/4evqt/ET/8QFkBFIGgAfMBysHsQWLA/oATP7R+9T5kvgx+L34JPo9/Mj+dgH6AwUGWQfQB1kHBQb6A3YByP49/CT6vfgx+JL41PnR+0z++gCLA7EFKwfMB4AHUgZkBPEBRP+t/Hr67/g5+G/4ivlp+9P9fQAaA1kF9gbAB58HmAbJBGoCwv8g/db6KPlJ+FT4R/kG+1v9AAClAvoEuQasB7cH2AYqBeACPgCW/Tf7aPlh+ED4Cvmn+ub8g/8tApcEdgaRB8cHEQeGBVMDvAAP/pz7rvmA+DT41fhP+nX8Bv+0AS8ELAZuB88HQwfcBcMDOAGK/gb8+/mn+DD4p/j7+Qb8iv44AcMD3AVDB88HbgcsBi8EtAEG/3X8T/rV+DT4gPiu+Zz7D/68AFMDhgURB8cHkQd2BpcELQKD/+b8p/oK+UD4Yfho+Tf7lv0+AOACKgXYBrcHrAe5BvoEpQIAAFv9BvtH+VT4Sfgo+db6IP3C/2oCyQSYBp8HwAf2BlkFGgN9ANP9afuK+W/4Ofjv+Hr6rfxE//EBZARSBoAHzAcrB7EFiwP6AEz+0fvU+ZL4Mfi9+CT6PfzI/nYB+gMFBlkH0AdZBwUG+gN2Acj+Pfwk+r34MfiS+NT50ftM/voAiwOxBSsHzAeAB1IGZATxAUT/rfx6+u/4Ofhv+Ir5afvT/X0AGgNZBfYGwAefB5gGyQRqAsL/IP3W+ij5SfhU+Ef5Bvtb/QAApQL6BLkGrAe3B9gGKgXgAj4Alv03+2j5YfhA+Ar5p/rm/IP/LQKXBHYGkQfHBxEHhgVTA7wAD/6c+675gPg0+NX4T/p1/Ab/tAEvBCwGbgfPB0MH3AXDAzgBiv4G/Pv5p/gw+Kf4+/kG/Ir+OAHDA9wFQwfPB24HLAYvBLQBBv91/E/61fg0+ID4rvmc+w/+vABTA4YFEQfHB5EHdgaXBC0Cg//m/Kf6CvlA+GH4aPk3+5b9PgDgAioF2Aa3B6wHuQb6BKUCAABb/Qb7R/lU+En4KPnW+iD9wv9qAskEmAafB8AH9gZZBRoDfQDT/Wn7ivlv+Dn47/h6+q38RP/xAWQEUgaAB8wHKwexBYsD+gBM/tH71PmS+DH4vfgk+j38yP52AfoDBQZZB9AHWQcFBvoDdgHI/j38JPq9+DH4kvjU+dH7TP76AIsDsQUrB8wHgAdSBmQE8QFE/638evrv+Dn4b/iK+Wn70/19ABoDWQX2BsAHnweYBskEagLC/yD91voo+Un4VPhH+Qb7W/0AAKUC+gS5BqwHtwfYBioF4AI+AJb9N/to+WH4QPgK+af65vyD/y0ClwR2BpEHxwcRB4YFUwO8AA/+nPuu+YD4NPjV+E/6dfwG/7QBLwQsBm4HzwdDB9wFwwM4AYr+Bvz7+af4MPin+Pv5BvyK/jgBwwPcBUMHzwduBywGLwS0AQb/dfxP+tX4NPiA+K75nPsP/rwAUwOGBREHxweRB3YGlwQtAoP/5vyn+gr5QPhh+Gj5N/uW/T4A4AIqBdgGtwesB7kG+gSlAgAAW/0G+0f5VPhJ+Cj51vog/cL/agLJBJgGnwfAB/YGWQUaA30A0/1p+4r5b/g5+O/4evqt/ET/8QFkBFIGgAfMBysHsQWLA/oATP7R+9T5kvgx+L34JPo9/Mj+dgH6AwUGWQfQB1kHBQb6A3YByP49/CT6vfgx+JL41PnR+0z++gCLA7EFKwfMB4AHUgZkBPEBRP+t/Hr67/g5+G/4ivlp+9P9fQAaA1kF9gbAB58HmAbJBGoCwv8g/db6KPlJ+FT4R/kG+1v9" type="audio/wav">Audio playback is unavailable.</source></audio>

CSS

audio {
  max-width: 100%;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Media versus image attributes

For audio/video, use src for a media URL; type is an optional hint that lets the browser skip unsupported formats. Do not use picture’s srcset and sizes as an audio-resolution mechanism. Keep sources before any track children.

For picture, use srcset and optionally sizes, media, and type to choose image candidates. Include an img after the sources; its alt supplies the text alternative and it renders the selected image.

Selection and errors

Browsers consider source candidates and supported formats, but type support alone cannot guarantee successful download and decoding. Fallback text inside a modern audio/video element is not dependable feedback for every failed source; provide visible alternatives and explicit error handling when needed.

Inspect the media’s currentSrc in the copied document. Add real alternate encodings only if they contain the same intended content and are actually available.

Sources and browser support

MDN: source describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.