josie birch josie birch

the mysterious Josie Birch

Web Designer | Illustrator | Animator | Coder

Major Morgan

Major Morgan Tutorial

December 18th, 2019 - by Josie

‘Lets Make Music’

The toy you couldn't put down and the beginning of a music career, Major Morgan was a kids toy made by Fisher Price from the late seventies, early eighties. With its distinctive electronic sound (all the better when the batteries are slightly flat) most kids had one of these to drive their parents to distraction, or at least I did anyway.

To play a Major Morgan all you needed to do was insert a coloured card and follow the colours or patterns along the top. In no time at all you could be playing Twinkle Twinkle Little Star or Here We Go Round The Mulberry Bush.

To start this project I made the Major Morgan graphic using Adobe Illustrator. I saved and uploaded it to my website as an SVG which is great for responsiveness.

Next I added the HTML. What you see below is a series of div ids which will contain the clickable sounds.

Next the CSS. Below you can see the styles for the Major Morgan graphic I created and the styles for the div tags. Each one I have positioned to fall on top of the correct note of the Major Morgan graphic.

How I created the Major Morgan sound, the most crucial part of the operation!

I had a few problems finding the sounds I needed, I could either find a Major Morgan toy on Ebay and record the sounds hoping that the quality would be good enough, or I could try and recreate the sound myself. I chose the latter.

To do this I used Garageband and the Lead Electric Buzz to create the sound I needed, merging two keys at the same time to get that distinctive Major Morgan sound. It worked way better than I could have hoped for.

Next I wrote some JavaScript to get the sounds to play.

First I created some constants to hold the id's of each sound using the document get element by id to retrieve the id in the html.

Next I appended each constant I had made to an event listener function to play each sound. I stored the sounds in a folder called soundsmm.

And that's really all there is to it. In the code snippet below I've only shown a few sounds. You could adapt this to create your own sound machine.