A virtual teacher who reveals to you the great secrets of Base64

<embed>

The <embed> is a HTML5 element and is used to load and display objects that browsers do not understand by default. Typically, such objects can be videos, flash movies, sound files, and so on. Some objects may require an additional module or plugin. The object can be specified via the src attribute as regular URL-address or data URI.

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

<embed type="audio/mpeg" height="100" width="100%" src="//static.base64.guru/uploads/media/beep.mp3" />

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

<embed type="audio/mpeg" height="100" width="100%" 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" />

Both behaviors are identical — when you open the page, the <embed> 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.

To support HTML 4.0 and older browsers you should use the <object> tag to load objects. On other hand, for HTML5 and modern browsers use the <audio> tag to load sound files, and the <video> tag for video files.

Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Loading...