SoundShow Tutorial

So! You want to learn how to use SoundShow, do you? You're in luck! It's pretty simple to use.

But wait, Reboot! I don't know any htmls or scripty things!

That's okay, because I'll tell you what you need to do. Also, there will be pictures. Pictures are always nice, yeah?

First things first. You will need these things:

For anybody who is curious and a little more programming-savvy, these are the technologies I used (they're included in the download):

Let's get this thing going.

So first, pick out a song and get an MP3 of it. Got it? Awesome.

Next, draw your frames. Each frame must be the same width and height as every other frame. Otherwise, I can't guarantee how it'll look. Save each frame as a JPG with ONLY ITS NUMBER as its filename. Put these in a folder named "images" (no quotes).

Example: 1.jpg
Another example: 35.jpg

Make sure you don't skip a number. The code needs all the numbers to be there to work.

If you have a ton of frames, that's normal. No Light, No Light has 54 frames if that helps.

Now that you have your frames, let's open up your text editor.

Get your text editor and open up timing.js using whatever text editor you want to use. Like I said above, Notepad (Windows) and TextEdit (OSX) are totally fine and do the job, which means you don't need to install anything. My screenshots will be taken in Notepad++, which is why some of the text is colored (for convenience only -- it's still the same code).

Ready to make your first change? Find the totalFrames variable on line 12 and change the number to how many frames you have.

Example: var totalFrames = 45;

Now that you've made your first change, let me emphasize something. Make sure that semicolon is still there after the number. Semicolons belong at the end of a statement and tells the computer that the statement is finished. Many a programmer have pulled hair out over problems in their code, only to find that there is a missing semicolon. So make sure you don't accidentally delete it.

Next, put the name of your mp3 file in the mp3Name variable on line 16. Make sure you leave the quotes there and that there are no spaces in the filename.

Example: var mp3Name = "nolight.mp3";

Not so bad, right? Now you'll want to skip over the section marked "NO TOUCHY", because you don't want to change anything in there, and go to the section on line 24 that says "YOUR TIMING GOES HERE."

Let's get that audio editor ready now.

The reason for the audio editor is not to edit audio, but to get a more accurate number for the timing. The code measures the timing in seconds, but you can and should use decimals to increase accuracy. In any case, you can get this accuracy by using Audacity (or your preferred audio editor) to get more accurate timing.

I'll assume you're going to use Audacity. Make sure you've installed it and that it loads MP3s (there may be one extra thing you have to do when you install it -- it's detailed on Audacity's site). And if you're not using Audacity, you probably can figure out what I'm trying to explain and apply it to your preferred audio editor.

Anyways, go ahead and open your MP3.

Okay, you got your MP3 all loaded up? See the waveform? Great!

See how it's all squished up so it fits in the window? That sucks for timing, so you're going to need to zoom in. Click on the zoom tool towards the top of the window. When you put your mouse over the waveform, it'll turn into a magnifying glass. When you click, it will zoom in (weird in the context of audio, huh?) so you can see the individual seconds. Zoom enough so that it's timed in seconds with decimals and tick marks for every tenth of a second.

The general gist of how this goes is that you play the song in Audacity, stop it at a point where you want to make a transition, and make a note of the time in timing.js. Usually, you can't click fast enough to stop it right when you want to, so you'll have to fudge around and find that sweet spot.

I found that using the selection tool in Audacity makes things a lot easier.

If you put your mouse over the waveform, you'll see the cursor become one of those text-editing type cursors. If you click, it'll put a vertical line down. Now when you click Play, it will play from that point. This makes it easier to repeatedly listen to a part you want to listen to, and it also helps you mark the time where you want the transition to occur.

First off, 1.jpg is the very first frame that people will see (that is why there is no timing for 1.jpg). I haven't yet figured out why it doesn't show initially in Chrome and Safari, but it's fine in Firefox and IE9. Once I figure it out, I'll make a post about it or something.

So, let's say you're getting the timing for the very first transition: the transition from 1.jpg to 2.jpg.

The way the code is set up, every entry underneath that section marked "YOUR TIMING GOES HERE" corresponds to when that frame will drop in. That means that the number value at timing[2] is when 2.jpg will drop in. I found the transition to take 0.2 seconds, so when you find the exact place in your song where you want a transition to go, subtract 0.2 from that time. If it doesn't feel like the timing is right, play around with the number.

Example: timing[2] = 31.5; means that 2.jpg will drop in at 31.5 seconds in.
Another example: timing[8] = 68.1; means that 8.jpg will drop in at 68.1 seconds.

A note about transitions: If the transition occurs in a time that is small (maybe an interval of less than 2 seconds), sometimes the sliding doesn't work properly. Keep this in mind.

If you have 35 frames, the very last timing will be timing[35] = number;. The code already in timing.js goes all the way up to 54. If you do not have 54 frames, and instead have 35, delete everything after timing[35] = 192; (or whatever your timing[35] would be).

If you have more than 54 frames, add lines after timing[54] = number; in this format: timing[framenumber] = transitionnumber;. Replace framenumber with the number of the frame, and transitionnumber with the time of the transition. Again, don't forget the semicolon.

Some tips about the timing:

Okay, got all the timing done? Let's do some html to make the page pretty.

With your handy dandy text editor, open up index.html. This will the the actual webpage that people will see. This is HTML now, so you don't need to worry about semicolons.

Change the title of the webpage by changing the text between <title> </title> on line 6.

Example: <title>No Light, No Light || Portal x Florence + The Machine || did-you-reboot</title>

Change the header on line 21, so that it will show the title that you want at the top of the page.

Example: <div id="header"><b>Awesome Bolded Title</b> || Some not-bolded text!</div>
Results in: Awesome Bolded Title || Some not-bolded text!

Change the footer on line 32 so that it has your URL to your Tumblr or wherever else you want to point to. Alternatively, you can delete it if you don't want it.

Example: <div id="footer"><a href="http://did-you-reboot.tumblr.com">did-you-reboot . tumblr . com</a></div>

How links work:
     Anything between <a href="http://did-you-reboot.tumblr.com"> and </a> is what you see on the page.
     The URL in quotes after the href part of the <a href="..."> is the place you will go to if you click the text you see on the page.

This part is important. You need to change the canvas width and height on line 27 to match your frames' width and height.

Example (for frames that are 600 x 400): <canvas id="theCanvas" width="600" height="400">

If you want to change the page colors and fonts and things, it's a little more advanced. I'm not about to teach you guys how to use CSS, but if you care to learn on your own, you can modify style.css. If you want to change fonts, Google Webfonts is AWESOME. Look up a tutorial on how to embed fonts if that's what you want.

All right, all the code's done. Time to upload to a webhost!

You probably figured out by now that this isn't something you can just upload to deviantART or Tumblr or anything. You'll need a webhost to run all this. Also, as of yet, the code doesn't support off-site images (so you can't upload images to imgur first or anything. There are some issues with doing it that way that I need to ponder). If you have your own webspace, great! If not, there are a couple free options you can try. Free hosting won't be as good as paid hosting, but hey. Free.

I've tried to look at reviews for these two, but it's a mix of people who think they're both great and people who think they're both awful. But if all you want to do is host this comic, they're probably fine. : )

In any case, in the main directory of your webhost (or wherever you want to put it), you will upload these things:

And that's that! If everything's working, when you navigate to wherever you put the files, it should start loading.

Halp, Reboot! It's not working! ;A;

If it's a problem with the Javascript or image files, you should get a little popup box that explains the problem when you load the page.

If it's a problem actually getting to the page, you'll need to examine the directory structure and put in the right URL.

If you click play and the first frame is blank, check if you're using Google Chrome or Safari. Yes? I mentioned earlier that if you're using these, the first frame doesn't show for some reason. If you click "stop" before you click "play," it will show up. I'm working on figuring out why this is happening.

If you click play and don't hear music, you should probably check if your filename is correct between the mp3's filename and the name in timing.js. Also, check that you uploaded the JPlayer folder. There's a SWF in there that JPlayer needs (but it is not used by this code).

If you're having other issues that I can't think of right now, go ahead and fill out the form here.

Welp, that's that. I hope you found this helpful in making your own awesome slideshowthingamajigs.

Return to download page
No Light, No Light
did-you-reboot.tumblr.com

This was a labor of love by did-you-reboot. The mechanisms for timing were borrowed from Chell in the Rain and modified to work with HTML5 canvas.