Soundcite

Seamless inline audio.

Make a Clip

Tens of thousands of Egyptians packed into Tahrir Square in central Cairo on Friday ... The crowd was as large as any that has gathered in the square since the protests that forced out President Hosni Mubarak in February 2011.

Audio is a powerful device that can add emotion or context to a story. Unfortunately audio clips force uncomfortable choices: read or listen, but not both. Until now. SoundCite is a simple-to-use tool that lets you add inline audio to your story. The audio is not isolated; it plays right under the text you choose.

Knight Lab
A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

Tips & tricks

  1. Keep it short. We recommend not having more than 20 slides for a reader to click through.
  2. Pick stories that have a strong location narrative. It does not work well for stories that need to jump around in the map.
  3. Write each event as a part of a larger narrative.
  4. Include events that build up to major occurrences — not just the major events.

Ways you can use Soundcite

SoundCite clips can be used in a variety of situations. For more in-depth examples, click here.

Music

Tame Impala have never shied away from the sounds of classic rock radio, but Elephant is the first time they've gone deep into its mythology and symbolism. ... [It] initially sounds like a pure top-down songwriting exercise- as in, let's try to sound like the song's badass title. So, thick, one-note guitar riffs shuffle and stomp ...

Spoken Word

Stephanie Hooks pleaded for help after collapsing on the floor of her South Los Angeles home: "I can't breathe... . Help me breathe!" the 53-year-old grandmother wailed as frantic family members took turns on the phone with a Los Angeles Fire Department dispatcher...

Natural Sound

Tens of thousands of Egyptians packed into Tahrir Square in central Cairo on Friday ... The crowd was as large as any that has gathered in the square since the protests that forced out President Hosni Mubarak in February 2011.

Examples

How the Islamic State is Carving out a New Country

Yanukovych on the Run

Hockey, Hip-hop, and Other Green Line Highlights

From 0-89 Million Pounds - The Most Expensive Transfers in Football History

Game of Thrones: Arya's Journey

Hieronymus Bosch: Garden of Earthly Delights

Create Clips

On your site or blog in no time. As easy as 1-2-3.

  1. Paste your audio URL

    Before you start, you must publish your sound files to the web. You can use SoundCloud or put MP3 or Ogg audio files on a webserver of your choice.

    Put the URL to your audio in the field below and click "load."

    Want to try Soundcite but you don't have any audio? Try one of these:
    SoundCloud example: https://soundcloud.com/studsterkel-radio-archive/alex-kotlowitz-discusses-his-book-there-are-no-children-here-19910228
    MP3 example: /media/bach-cello-suite.mp3

  2. Set clip options

    Do you want to play just part of your audio file? Soundcite can do that without you having to cut the file up into separate clips.

    If you want to play the entire audio file, you don't have to do anything. If you want to play just a clip, you can enter the start and end times in the fields below. Don't know the exact time? Use the player to listen to your source, and click the set from player buttons at the right time.

    Set from player
    Set from player

    Created clips

    None
  3. Embedding

    When you are finished creating clips, take the following embed code and paste it at the top of your page.

    Then, for each clip, paste its associated embed code (created above) where the text would normally go in the page.
    SoundCloud imposes rate limits on API key usage. By default, all Soundcite users use the same API key, which can lead to cases where your Soundcite clips temporarily stop working. You can prevent this from happening by registering for your own free SoundCloud API key and pasting it in the field below.
    How to get a SoundCloud client ID
    • Go to https://developers.soundcloud.com/
    • Click "Register a new application
    • Fill in the application for and click "Register"
    • Copy the "Client ID" field. This is your API key
    • Be sure to save the app

Help

Need help? First, please be sure to look at our list of frequently asked questions below. If you're brand new to Soundcite JS, you may also want to watch our introductory video.

Technical documentation

Go further with Soundcite:

Frequently asked questions

  • What CMS does StoryMapJS work on?

    • Custom sites
    • Wordpress
    • Squarespace
    • Wix

    Please let us know if you have tried it on others and it works, so that we can add to the list.

  • Why aren't my Google Drive or DropBox Zoomify images working?

    Unfortunately, Google has deprecated web hosting in Google Drive, which means that Zoomify images hosted on Google Drive. will no longer display. Dropbox has similary discontinued rendering content in public folders, so this method will cause problems for many users as well.

    We're working on a solution, but for right now the only other option seems to be hosting your images on a web server.

  • Why are my DropBox images not showing?

    First the image must be in the public folder.

    To get the image URL change the domain name from the link that dropbox creates.

    Incorrect: https://www.dropbox.com/s/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

    Correct: https://dl.dropboxusercontent.com/u/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

  • How can I have a map without the lines between points?

    To disable connecting lines on maps, use the StoryMap option: Treat as Image (as opposed to the default, Treat as Cartography)

  • How can I link to a specific slide?

    You can add a parameter to the URL that is the value of the iframe src attribute, start_at_slide. Its value should be a number from 0 to one less than the total number of slides in the storymap.

    For example: http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=//media.knightlab.com/StoryMapJS/demo/sochi.json&start_at_slide=5

    This should load Sochi 2014 Olympic Torch Relay Highlights: Slide 5.

  • How can I use a custom map?

    Choose options from the top left of the StoryMap window, then from the map type menu choose the type you like.

    Select Mapbox to enter the ID of your Mapbox map.

    Select custom to enter the URL for a tile server. If the server supports multiple subdomains, enter them as a single string in the Subdomain field (e.g. subdomains 'a', 'b', and 'c' should be entered as 'abc').

  • How can I adjust the zoom?

    To keep it simple for most users, we've made some assumptions in the authoring tool which may not universally apply. For example, the first screen is always an overview slide. Also, the zoom is affected by the overall size of the map and the relationship between the current and previous points on the map.

    It's possible to download the configuration (a JSON file) that the authoring tool makes and edit the JSON yourself. You could then change the first slide to not be an overview and manually set a starting lat/lon/zoom.

    Be aware that switching back and forth between editing within and outside the authoring tool can get messy, so we suggest using our advanced method to have maximum control over the zoom feature and more.

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

Easy-to-make, beautiful timelines.

Maps that tell stories.

Easy-to-make frame comparisons.

Seamless inline audio.
View More