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.
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 NPR.org, 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:
