<audio>

The <audio> tag is a HTML5 element which adds, plays, and manages sound files on a web page. The path to the sound file can be specified via the src attribute or a nested <source> tag. Both methods support data URIs.

For example, you can embed and autoplay a beep sound as follows:

<audio autoplay controls src="//static.base64.guru/uploads/media/beep.mp3">
  The “audio” tag is not supported by your browser. Click [here] to download the sound file.
</audio>

The same can be achieved by encoding MP3 to Base64 and embedding it using data URI:

<audio autoplay controls src="data:audio/mpeg;base64,/+MYxAAEaAIEeUAQAgBgNgP/////KQQ/////Lvrg+lcWYHgtjadzsbTq+yREu495tq9c6v/7vt/of7mna9v6/btUnU17Jun9/+MYxCkT26KW+YGBAj9v6vUh+zab//v/96C3/pu6H+pv//r/ycIIP4pcWWTRBBBAMXgNdbRaABQAAABRWKwgjQVX0ECmrb///+MYxBQSM0sWWYI4A++Z/////////////0rOZ3MP//7H44QEgxgdvRVMXHZseL//540B4JAvMPEgaA4/0nHjxLhRgAoAYAgA/+MYxAYIAAJfGYEQAMAJAIAQMAwX936/q/tWtv/2f/+v//6v/+7qTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV">
  The “audio” tag is not supported by your browser. Click [here] to download the sound file.
</audio>

Both behaviors are identical — when you open the page, the <audio> tag embeds and plays the same sound file. The difference is that in the first case the browser sends one HTTP request to fetch the MP3 file, when in the second case the sound file is already loaded in the browser’s memory and it does not need to send any HTTP requests.

Please note that Base64 Data URIs have some limitations. In addition, like almost any unconventional solutions, it has both advantages and disadvantages. Therefore, if you plan to use it, first of all, read about Base64 Data URI.