Soundcite JS

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
This video will walk you through the basics of creating a Soundcite clip. Note that the visual style of the Soundcite page has changed since this video was made, but the basic steps have not.

Tips & tricks

  1. Keep it brief! Long clips distract from the story.
  2. Select your link text carefully. Try not to use so much text that it wraps to two lines.
  3. Remember you don't have to cut up your audio file. Soundcite can serve multiple segments from a single source.

Ways you can use Soundcite

SoundCite clips can be used in a variety of situations.

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.

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, M4A, WAV 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.

If you don't find an answer there, try our support forums or use our tech support web form. Please be clear with your question, and if possible, include a link to a page which shows the issue with which you need help. We can only answer support questions in English. We try to be prompt, but please understand that we do not have a full-time tech support staff.

Find a bug? If you are confident you have found a bug, please report it as a GitHub issue. Be sure to include detailed instructions on how to reproduce the bug. If you're not sure, please start with the tech support system.

Frequently asked questions

  • Can I use SoundCite with Wordpress?

    Yes, with some cautions. For some user roles, Wordpress "filters" HTML, stripping out the information that SoundCite needs to function. Specifically, for most Wordpress installs, only users with the administrator and editor roles will be able to enter SoundCite clips. Users with the author or contributor roles will have the SoundCite information stripped out of their posts. This will also happen if an author or contributor edits a post after an administrator or editor has configured SoundCite. For more, see the Roles and Capabilities page of the Wordpress Codex.

    You can install the User Role Editor plugin to grant the "unfiltered_html" capability to the "author" and "contributor" roles. There are risks involved in allowing less trusted users to author unfiltered HTML, so consider your own situation before choosing this solution.

    Details may be slightly different for Wordpress multiuser sites.

  • Can I customize what SoundCite looks like?

    SoundCite is designed with a minimalist style meant to work with most websites. If you want to customize the appearance, you can change most of how it looks with CSS rules. Right now it's hard to change the moving progress bar with CSS, which may make it hard to fit other custom styles in. Read more on the Github Wiki.
  • Can I use an audio source other than SoundCloud?

    SoundCite will also work with MP3, M4A, WAV and Ogg clips that are hosted on your own server.
  • Does SoundCite work on iPhone, iPad, and other iOS devices?

    SoundCite works best on iOS devices when using MP3 files. It will work with SoundCloud, but there are issues seeking within the audio stream. If you have SoundCite clips with a Start time other than 0, you may experience unpredictable playback behavior.
  • What if I don't use my own API key?

    SoundCloud imposes rate limits on API key usage. It occasionally happens that a popular SoundCite embed will reach the limit on our application API key, affecting all other embeds. To isolate your request count from SoundCite embeds on other sites, use your own API key by pasting your SoundCloud Client ID into the optional Client ID field before you copy the SoundCite embed code.

    You can always add your key later by prepending the following code to your embed code (with your own client ID):

    <script type="text/javascript">SOUNDCITE_CONFIG = { soundcloud_client_id: "YOUR_SOUNDCLOUD_CLIENT_ID" }</script>

Storytelling Tools

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

View More