Lesson 36: Embedding Audio from SoundCloud

On the importance of game music...

"In an audiovisual world, music is by far the best way to establish mood and tone. It plays into our senses, creeps into our minds." - Conor McNamara

"It's true, game music doesn't sound like anything you would hear on the radio or MTV and most people don't recognize it when they hear it. They think it's electronic music usually. But it's not - it's a special musical form that not only sounds great, but helps you to remember. I like remembering." - Romero


1. Go to soundcloud.com and search for game music. Then on the left menu select tracks. Then on the bottom of the left menu select Game music from the Popular Tags. This should bring you here. Of course, you may decide to look for music tracks for your game an alternate way.

2. After you choose a track that you would like to add to the Mouse side-scroller game, click the Share button under the track.

3. Click on the Embed tab and copy the iframe embed code.

4. Paste the code in your HTML directly under the gameWindow.

The track should now appear underneath the gameWindow.

Problem #1, you want the sound track playing but you do not want it to be visible. Problem #2, you want the sound track to play immediately without having to press the Play button.

5. Modify the code by removing the unneeded attributes (width, height, scrolling, and frameborder). In the remaining URL, set the autoplay to true and the visual to false.

That makes the track play immediately when the page is loaded (due to setting the autoplay to true), but the iframe is still visible on the page.

6. Add some inline CSS to remove the element from the page.

Now the only visual indication of the audio track (in Google Chrome) is a small speaker icon in the browser tab.

Embedding audio in this way may work for you. Understand though that if the owner of the track removes it from SoundCloud then it will not play on your page. If you are using SoundCloud for game audio, you would be wise to upload the music yourself.

One disadvantage of using embedded video in this way is that you may not have the control you need to manipulate it during gameplay. In the next lesson you will learn how to add audio via JavaScript so that you do have control over it during gameplay.