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. Put MP3, M4A, WAV or Ogg audio files on a webserver of your choice. (Confused? What about Soundcloud? See the FAQ below.)

    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 this: /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.

    Getting a SoundCloud client ID

    To get a SoundCloud client ID, you must register an application with them. However, for many years now, the process to register an application has had this message: "Due to the high amount of requests recently received, we will no longer be processing API application requests at this time. We are working to re-evaluate our process to make it more efficient." Unfortunately, this means that if you do not already have a SoundCloud client ID, you are unlikely to have satisfying results using SoundCite with SoundCloud audio. The best solution is to upload audio files in supported formats (MP3, M4A, WAV, or Ogg) to a webserver.

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! We now have a WordPress plugin which makes using Soundcite as easy as we can make it. Once it's installed, just copy and paste your clips from step 2 above -- be sure to paste them into the 'text' pane (where you edit HTML source code), not the 'visual' pane. With the WordPress plugin, you can skip step 3.

  • 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. Because of the animation for playing clips, you can't change the background color with CSS. However, you can specify a background color with JavaScript configuration. Here is an example: <script type="text/javascript">SOUNDCITE_CONFIG = { background_color: "#ff0000" }</script> You can use any valid RGB hex code for the color. The alpha transparency is not configurable. All clips on the same page must have the same background color.
  • Does SoundCite work with SoundCloud?

    When we first made SoundCite, SoundCloud was the only way to serve your audio. Since then, SoundCloud has changed the way they work with developers. Unless you have a SoundCloud client ID, we do not recommend hosting your audio on SoundCloud. KnightLab has a single client ID which uses up its daily allowance of plays very quickly, so while it may seem to work occasionally, it will be unpredictable. SoundCloud is no longer issuing new client IDs. If you have one from before they stopped, you can configure SoundCite to use your own client ID, and then, unless your project is wildly popular, you should have satisfactory results.
  • How can I serve audio without SoundCloud?

    There are no other novice-friendly audio hosting services that we know of. If you are able to upload audio files to your server, SoundCite can play those back. For example, WordPress users can use the "Add Media" button in the post editor to upload a file, and then use that URL in the SoundCite clip creator.

    If your server doesn't let you upload audio files, you may be able to use services like Amazon S3. Generally, cloud storage options such as Google Drive or DropBox will not work.

    SoundCite works with MP3, M4A, WAV and Ogg clips, as long as they can be loaded with a regular URL.

  • 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.

Storytelling Tools

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

View More