Even though there is a Scratch project website where the Scratch community uploads its projects, there is also an alternative method to embed Scratch within your own website.  Since TeachMeProgramming.com is also teaching HTML5, we are happy to show you how to embed your Scratch applet using HTML5.  Read on to find out more.

Pre HTML5 versions support the <applet> tag, however, this tag is deprecated in HTML5.  HTML5 encourages the use of the <object> tag instead, which is brand new, that can be used to embed media in your website, such as videos and audio.

You will need 2 files in addition to your Scratch projects in the same directory as your HTML5 file:

1. ScratchApplet.jar
2. soundbank.gm

The following code is used to embed a sample applet:

In the code above, the name of the Scratch project is "abc-song.sb" and is assigned to the attribute "value".  The applet's dimensions (height and width) are configurable.

You can view the sample HTML5 by clicking on the image.

Enjoy!

| More...