Home > Books > Amstrad CPC > How to embed an emulator

How to embed an Amstrad CPC 464 / CPC 6128 emulator in your website

Photo of Amstrad CPC computer For a long time, I've wanted to be able to embed an Amstrad CPC 464 emulator in my website, so that people can more easily play my Amstrad games.

Thanks to Andre Weissflog, that is now possible! He has created the tiny8bit emulator, which emulates the Amstrad CPC 6128 as well as the Commodore 64, Vic 20, and ZX Spectrum.

(If you're just looking for an emulator to download, see these instructions).

Try the online Amstrad CPC emulator

Now, if you'd like to step this way, you can try the Amstrad emulator I've embedded in my site here:

Amstrad disc You can download my Amstrad CPC games and utilities disc to use these programs in your favourite emulator.

How to embed the Amstrad CPC emulator

If you want to embed an emulator in your site, follow these steps. I've used the Amstrad emulator but similar steps will apply for other platforms too.

  1. Download the tiny8bit code at github. You can do it in your browser: you don't need to install any special software to download from github.

  2. For the Amstrad CPC platform, you need to copy the following files to your website. I recommend putting them in their own folder to keep everything tidy.
    • cpc.html
    • cpc.js
    • cpc.wasm

  3. The cpc.html file is the one that displays the emulator. You can create a link to it that includes the name of a .sna file to load. The advantage of .sna files is that they load instantly. In contrast, .dsk images emulate the disc drive, which is slower. Here's an example that loads a game called fred.sna in a subfolder called games, and also enables the joystick:

  4. If you want to use a .dsk file, you can load it in the same way, but you can also append a BASIC instruction that is automatically typed in when the emulator loads. This instruction can be used to run the appropriate file from the disc. For example, to load the disc sean.dsk in the folder games, and run the program "menu.bas" on it, you would use the following link. The %22 code is for " and the %0A is to press Enter at the end of the line.

    With the .dsk format you can have many different programs in one file. The .dsk file for my games was already created, so it was a no-brainer to use that one file rather than creating lots of separate .sna files. I would hope that the .dsk file would be cached if someone loads additional programs from it from different web pages, but I haven't been able to validate this.

  5. So far, you can add the Amstrad emulator code to your website. If you want to put the emulator inside an iframe so it integrates with the rest of your site more smoothly, there is one more complication. The emulator in the iframe doesn't have the keyboard focus, so you can see demos but you can't interact with the emulator. To fix that, I added this snippet of code after the <script type="text/javascript"> line in cpc.html:
    window.addEventListener('load', function () {
    document.body.addEventListener('click',function(e) {

    That code makes the emulator the active window when the window loads and when it is clicked. It was created by Quinten Clause as documented here. Thank you, Quinten!

  6. The emulator only worked when I uploaded it to the web and viewed it in a browser: it didn't work when I opened the web page from my computer's local storage. To test your emulator, make sure you upload the files to a web server.

  7. You're all set! Remember to remind your users to click the emulator to activate the keyboard in it.

Thanks to Andre, Quinten, and to Amstrad who have allowed the Amstrad CPC ROMs to be used in emulators.

Where next?


© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Coding Compendium

Coding Compendium

A free 100-page ebook collecting my projects and tutorials for Raspberry Pi, micro:bit, Scratch and Python. Simply join my newsletter to download it.

Web Design in Easy Steps

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Newsletter | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About