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

<object>

The <object> tag is very similar to <embed> and <iframe>. All of these tags have the same purpose: to embed external files in the current page. For example, you can embed an external HTML file using any of these tags and you’ll get the same result. However, each of them has its own characteristics, so it is recommended to use them for their intended purpose. The <object> tag is most often used to load media files or those that require additional plugins.

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

<object type="audio/mpeg" width="100%" height="100" data="//static.base64.guru/uploads/media/beep.mp3">
  The “object” tag is not supported by your browser.
</object>

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

<object type="audio/mpeg" width="100%" height="100" data="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 “object” tag is not supported by your browser.
</object>

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

Even if the <object> tag allows you to embed images, HTML, sound, and video files, it is recommended to embed them using the appropriate tags, such as <img>, <iframe>, <audio>, or <video>. If you intend to support older browsers, please note that the last two tags may not work and you should use the <object> element.

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.