SoundciteJS
Use Firefox!
Go to https://soundcite.knightlab.com/ and click Make a clip to get started.
Get Audio
Grab a link to an mp3 or ogg file from https://archive.org/download/Greatest_Speeches_of_the_20th_Century by right-clicking on the link and selecting Copy Link Address. Paste this into step 1 of the Soundcite directions and click Load. Your audio file will be uploaded to the Soundcite server.
Edit the Audio File
Set the Start Time and Stop Time for the clip. You can set this manually by entering the times, or drag the ball to the appropriate position in the slider and click Set from player. Do this for both the stop and stop times. You can’t have the stop time set before the start time!
If you want to use multiple clips from the same audio file, you don’t need to edit it beforehand. Just add the link again and change the start and stop times.
You can set how many times it will play (usually once will be enough). In Link text, enter the text you want to display as part of the clip. If it’s a short clip, you could potentially use the text of the clip itself as the text. Click Create clip to generate the code.
Grab the Codes
Copy the code from the Created clips section and paste it into an HTML file. You can use one of the HTML files you created for the first lab, or you can download an HTML file template from http://public.gettysburg.edu/~rmiessle/lab.html by right-clicking on the link and selecting Save As, then once you’ve saved it to your computer, then use Notepad to open and edit it. You can also copy the code and use your GitHub account if you want. This is a <span> HTML tag, so you can put this between <p> HTML tags and have it fall in line.
You will also need to grab the code from step 3 and put it between the <head> HTML tags in your file, unless you use the template provided (which already has it included).
JuxtaposeJS
To get started with JuxtaposeJS, go to https://juxtapose.knightlab.com/ and click Make a Juxtapose to get started.
Getting Images
Finding images to juxtapose on each other is the most difficult part of using this tool. If comparing historical to modern photographs, you will likely have to take your own photographs from the same general location in order to get a good match. Then you will have to adjust the images using Photoshop or another image editing software in order to get them to line up properly. One way you can do this is open two images with Photoshop. One on of them, create a new layer, paste the other image into that layer, and change the top layer’s opacity so the bottom image shows up underneath. Then you can use the Transform function to resize and manipulate the images. A good tutorial is available at https://historyblogger.net/2014/09/27/tutorial-on-juxtaposing-historical-modern-images/.
Some images for the purposes of testing:
- http://public.gettysburg.edu/~rmiessle/dssf/nyc-then.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/nyc-now.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/belgium-before.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/belgium-after.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/climate-then.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/climate-now.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/pennhall-then.jpg
- http://public.gettysburg.edu/~rmiessle/dssf/pennhall-now.jpg
Creating a Juxtapose
Paste the URLs for both images into each image and adjust the options. You can add labels and credits. If you’d prefer the slide move horizontally, check the Vertical box.
Check Preview to see what it will look like, then Publish to get links and an embed code. It’s that easy! Add the embed code to your HTML page.
Not every digital tool necessarily needs to be complex or difficult to give good results.
