How and why NPR made 15 years worth of audio available across the web

Screenshot of NPR's new embeddable audio player.

Last month, NPR announced that it would make 800,000 pieces of audio available to embed across the web. While NPR has offered limited embedding since 2009, the depth and breadth of this project is new. It's the first time that NPR will offer a single embeddable player with access to such a large amount of content. The work to design and build the player began earlier this year and was led by Patrick Cooper, director of web and engagement at NPR. Here's what Cooper had to say about the project, the challenges it faced, and why NPR took it on.

The conversation has been edited for length and clarity.

Patrick Cooper

Why make all of NPR's audio embeddable?

We’re a public media organization, and we have always been about allowing our digital content to travel as broadly as possible to reach the largest number of users possible.

We were very early in developing APIs, and before I arrived in 2010 the organization was deep in allowing API access to its other content, both for stations and for general users. So that’s always been our ethic as a public media organization.  In 2009 we had an initial embed player that really set a good precedent for how our audio could travel and when we looked at upgrading that experience this year it wasn’t a hard decision inside this organization at all; everyone pretty quickly got down to how should we do it, not whether we should do it.

What were the biggest technical hurdles you had to overcome?

There are a lot of different embed styles on the web today, so we started with a competitive analysis of all of them, looking at it from a technical perspective. Were people using iframes? How were people using iframes? How might our responsive code base work with an iframe? Iframes and responsive design are awkward bedfellows, so we had to make some substitutions around how to pursue that.

The other big piece was in addition to creating the embed player, we also had to add the embedding ability to all the different players on our site. As an audio organization, we have a lot of audio players, so there was a bunch of design work there, and a lot of technical refactoring that was critical to the project. For the developers who tackled all those different types of players on the site to add embeddability, that was one of the more complex parts of the project, and it certainly made testing very complicated. This was one of our more complicated QA instances — we have all these different types of site players that can be embedded at different break points across all kinds of devices. Testing all those permutations was a lengthy process for the developers and for the rest of the team.

Would you describe the new embeddability as a process of adapting all of those different players, or was it adapting those players to be embeddable?

We considered the embed player separate from anything that’s playing on the NPR website. It’s specifically designed to live in an iframe and to travel and live within sites that aren’t our own. So what we’re doing on our site was just modifying the nature and behavior of those audio assets to offer the additional option. We haven’t yet overhauled the audio players as a whole on, but that’s something that we’re now pursuing now that the embed player is out the door. We’re finally going to get rid of the pop up audio player, and replace it with something better.

When do you expect that to be done?

We’re looking at the fall.

How far back do you have recordings on your website that had to be converted?

We have MP3 audio going back to 2000, 2001ish. Before that, we generally processed our audio in RealAudio, so prior to 2000 that stuff won’t be embedded until we can pursue some great conversion project someday, but our current effort still gets about 15 years worth of audio for embedding.

Have you seen any uses of the player on other websites that you’ve enjoyed?

WBEZ in Chicago used the player within an hour of it going live. We’ve seen Poynter pick up the player for various articles about our coverage and work, and we’ve seen a few political blogs pick it up as well, to point at the audio, allow people to listen, and then add their thoughts. That’s something we welcome, we hope our audio storytelling starts conversations.

What were your biggest concerns and considerations in designing the player?

Our designers focused very closely on how the embed player should appear inside other people’s environments. So how do we design a player that looks good, and is usable, and is clearly NPR, within whatever website it happens to be embedded in? That was a complicated question that they spent a lot of time tackling: how to establish clarity and branding within an unknown destination experience. There was also a good amount of thought put into how a number of key elements of a the player interact with each other — the play button, images, the scrubber, that kind of thing — but do so in a way that feels very accessible and usable to our potential listeners. Our designers did a great job handling that.

What were some other concerns in designing the player?

When we were building this player, we made sure to have good metrics. We want to see how this experience is playing out across the web and to really learn about how people are listening which allows us to serve them better. In the Products Division, we worked closely with National Public Media, our sponsorship arm, in finding user-friendly ways to bring in sponsorship and keep the lights on. So we worked closely with them with a post-roll experience. Sometimes you’ll hear it, sometimes not, depending on when and where it’s sold. We’re a nonprofit, but we have to be smart in our business thinking, so having that kind of collaboration that keeps the lights but is still friendly to the audience is very valuable to us.

See a live example of the player below:

Latest Posts

  • Prototyping Augmented Reality

    Something that really frustrates me is that, while I’m excited about the potential AR has for storytelling, I don’t feel like I have really great AR experiences that I can point people to. We know that AR is great for taking a selfie with a Pikachu and it’s pretty good at measuring spaces (as long as your room is really well lit and your phone is fully charged) but beyond that, we’re really still figuring...

    Continue Reading

  • Capturing the Soundfield: Recording Ambisonics for VR

    When building experiences in virtual reality we’re confronted with the challenge of mimicking how sounds hit us in the real world from all directions. One useful tool for us to attempt this mimicry is called a soundfield microphone. We tested one of these microphones to explore how audio plays into building immersive experiences for virtual reality. Approaching ambisonics with the soundfield microphone has become popular in development for VR particularly for 360 videos. With it,...

    Continue Reading

  • How to translate live-spoken human words into computer “truth”

    Our Knight Lab team spent three months in Winter 2018 exploring how to combine various technologies to capture, interpret, and fact check live broadcasts from television news stations, using Amazon’s Alexa personal assistant device as a low-friction way to initiate the process. The ultimate goal was to build an Alexa skill that could be its own form of live, automated fact-checking: cross-referencing a statement from a politician or otherwise newsworthy figure against previously fact-checked statements......

    Continue Reading

  • Northwestern is hiring a CS + Journalism professor

    Work with us at the intersection of media, technology and design.

    Are you interested in working with journalism and computer science students to build innovative media tools, products and apps? Would you like to teach the next generation of media innovators? Do you have a track record building technologies for journalists, publishers, storytellers or media consumers? Northwestern University is recruiting for an assistant or associate professor for computer science AND journalism, who will share an appointment in the Medill School of Journalism and the McCormick School...

    Continue Reading

  • Introducing StorylineJS

    Today we're excited to release a new tool for storytellers.

    StorylineJS makes it easy to tell the story behind a dataset, without the need for programming or data visualization expertise. Just upload your data to Google Sheets, add two columns, and fill in the story on the rows you want to highlight. Set a few configuration options and you have an annotated chart, ready to embed on your website. (And did we mention, it looks great on phones?) As with all of our tools, simplicity...

    Continue Reading

  • Join us in October: NU hosts the Computation + Journalism 2017 symposium

    An exciting lineup of researchers, technologists and journalists will convene in October for Computation + Journalism Symposium 2017 at Northwestern University. Register now and book your hotel rooms for the event, which will take place on Friday, Oct. 13, and Saturday, Oct. 14 in Evanston, IL. Hotel room blocks near campus are filling up fast! Speakers will include: Ashwin Ram, who heads research and development for Amazon’s Alexa artificial intelligence (AI) agent, which powers the...

    Continue Reading

Storytelling Tools

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

View More