Tag Archives: css3

JavaScript Critique: The Washington Post

site: http://www.niemanlab.org/2013/07/arguing-for-a-new-genre-javascript-journalism/

Screen Shot 2013-12-09 at 4.45.29 PM

While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

function embedWPAudioPlayer(opts) {
 var id = opts.container,
 url = opts.url,
 width = opts.width,
 filetype = url.substr(url.length-3);
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin || !Modernizr.audio) { //if it has the plugin OR it doesn't support HTML5
 var so = new SWFObject("http://media.washingtonpost.com/wp-srv/graphics/assets/swf/soundplayer_stretch.swf", id, width, "30", "9", "#ffffff");
 so.addParam("id", id);
 so.addParam("name", id);
 so.addParam("allowScriptAccess", "always");
 so.addParam("wMode", "transparent");
 so.addParam("swfliveconnect", true);
 so.addVariable("soundurl", url);
 } else if (Modernizr.audio) {
 $('#'+id).html('<audio controls style="width:' + width + 'px;"><source src="'+ url +'" /></audio>');


It’s a little hard to understand, but knowing where to find it is pretty useful in case one would want to use it later.

It really adds to the piece since you can actually hear the words being spoken. Without the audio, this story would lose a lot of its value.