<audio> embeds sound with a browser-managed player. Add controls so readers can start, pause, seek, and adjust playback without an improvised interface.
Play a short tone
This quarter-second tone is embedded in the document. It has no spoken words. Playback begins only when you choose it.
HTML and CSS
HTML
<p>Sound description: one short, steady tone.</p>
<audio controls preload="metadata" aria-label="A short demonstration tone"><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.
Sources and loading
Use audio’s src, or nested source elements with src and an optional accurate type hint. srcset, sizes, width, and height are image-source concepts, not a responsive-audio recipe.
preload is a hint with none, metadata, or auto; its default is browser-dependent. autoplay is subject to browser permission and user policy, so its presence does not guarantee playback. muted and loop are Boolean attributes.
Accessible alternatives
Provide a transcript for speech and describe meaningful sounds. Native audio controls do not display WebVTT captions like a video surface; audio-only content can use a video player when visible synchronized captions are needed. Test the chosen delivery method.
Child fallback text addresses browsers that do not support audio, not every download or codec failure. Put essential descriptions and an alternative link outside the player. In a real project, serve a small optimized audio file rather than embedding large recordings in HTML.
Sources and browser support
MDN: audio describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.