{"id":1036,"date":"2017-06-01T16:47:51","date_gmt":"2017-06-01T20:47:51","guid":{"rendered":"http:\/\/dssf.musselmanlibrary.org\/2017\/?page_id=1036"},"modified":"2017-06-01T22:26:36","modified_gmt":"2017-06-02T02:26:36","slug":"images-and-sounds","status":"publish","type":"page","link":"https:\/\/dssf.musselmanlibrary.org\/2017\/resources\/labs\/images-and-sounds\/","title":{"rendered":"Images and Sounds"},"content":{"rendered":"

SoundciteJS<\/h3>\n

Use Firefox!<\/p>\n

Go to\u00a0https:\/\/soundcite.knightlab.com\/ and click Make a clip<\/strong> to get started.<\/p>\n

Get Audio<\/h3>\n

Grab a link to an mp3<\/strong>\u00a0or ogg<\/strong> file from\u00a0https:\/\/archive.org\/download\/Greatest_Speeches_of_the_20th_Century by right-clicking on the link and selecting Copy Link Address<\/strong>. Paste this into step 1<\/strong> of the Soundcite directions and click Load<\/strong>. Your audio file will be uploaded to the Soundcite server.<\/p>\n

Edit the Audio File<\/h3>\n

Set the Start Time<\/strong> and Stop Time<\/strong> for the clip. You can set this manually by entering the times, or\u00a0drag the ball to the appropriate position in the slider and click Set from player<\/strong>. Do this for both the stop and stop times. You can’t have the stop time set before the start time!<\/p>\n

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.<\/p>\n

You can set how many times it will play (usually once will be enough). In Link text<\/strong>, 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<\/strong> to generate the code.<\/p>\n

Grab the Codes<\/h3>\n

Copy the code from the Created clips<\/strong> section and paste it into an HTML file. \u00a0You 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<\/a> 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.\u00a0This is a <span>\u00a0<\/strong>HTML tag, so you can put this between <p>\u00a0<\/strong>HTML tags and have it fall in line.<\/p>\n

You will also need to grab the code from step 3\u00a0<\/strong>and put it between the <head><\/strong> HTML tags in your file, unless you use the template provided (which already has it included).<\/p>\n

JuxtaposeJS<\/h2>\n

To get started with JuxtaposeJS, go to\u00a0https:\/\/juxtapose.knightlab.com\/<\/a> and click Make a Juxtapose<\/strong> to get started.<\/p>\n

Getting Images<\/h3>\n

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\u00a0https:\/\/historyblogger.net\/2014\/09\/27\/tutorial-on-juxtaposing-historical-modern-images\/<\/a>.<\/p>\n

 <\/p>\n

Some images for the purposes of testing:<\/p>\n