{"id":2250,"date":"2012-04-02T10:08:52","date_gmt":"2012-04-02T16:08:52","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=2250"},"modified":"2012-04-02T10:55:45","modified_gmt":"2012-04-02T16:55:45","slug":"inline-audio-player","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2012\/04\/02\/inline-audio-player\/","title":{"rendered":"Inline Audio Player"},"content":{"rendered":"

Download the code<\/a>.<\/p>\r\n

Demo<\/a>.<\/p>\r\n

Download the WP Audio Player Standalone<\/a>.<\/p>\r\n

So the rabbi asked me to add the ability to play the audio on the taamim page<\/a> (basically, a long list of short MP3's) directly on the page, rather than click the link to open a new page. No problem, right? We're living in an HTML5 world, so I should be able to do:<\/p>\r\n

$('a[href$=mp3]').each(function(){\r\n  $('<audio>').attr({src: this.href, controls: 'controls'}).insertBefore(this);\r\n});<\/code><\/pre>\r\n
And everything ought to work: browsers that can't handle <audio><\/a><\/code> elements get nothing, modern browsers get a modern audio player. Nice progressive enhancement.<\/p>\r\n
But of course, it's not that easy. Webkit (Chrome, Safari) supports MP3 playing, but Firefox does not (and won't<\/a>), and Internet Explorer only does for IE9 and up, and I have to support Windows XP and IE8 (source<\/a>; consistent with my experimentation). I don't like the <embed><\/code>ed players, so I'll go with Flash. I like the player that Language Log<\/a> uses, and viewing the source tells me that's WPAudioplayer<\/a>, which has a standalone version that requires just two files, the 11-kb swf<\/code> file and a 12-kb javascript file.<\/p>\r\n
To use it, include the javascript with a <script> element and initialize the player with AudioPlayer.setup('\/path\/to\/player.swf', {width: 100});<\/code> where 100<\/code> is the desired width of the player in pixels (it's constant for every player on the page and it's a mandatory option). Then, each player is implemented by replacing<\/em> an existing element, identified by id<\/code>: AudioPlayer.embed(id, {soundFile: '\/path\/to\/soundfile.mp3'});<\/code>.<\/p>\r\n
Of course, iOS won't run Flash, so I still need to use the <audio><\/a><\/code> element there. So I need to detect if the audio<\/code> element works, and if not, insert the Flash substitute. Browsers that can't handle either get a blank spot.<\/p>\r\n
Putting it together into a plugin:<\/p>\r\n
(function($) {\r\n\r\nvar uid = 0;\r\nvar init = function (swf, width){\r\n\tAudioPlayer.setup(swf, {width: width});\r\n\tinit = $.noop;\r\n}\r\n$.fn.inline_mp3 = function(swf){\r\n  return this.each(function(){\r\n\t\tvar id = 'audioplayer_'+(uid++);\r\n\t\tvar player = $('<audio>').attr({\r\n\t\t\tsrc: this.href,\r\n\t\t\tcontrols: 'controls',\r\n\t\t\tid: id\r\n\t\t}).insertBefore(this);\r\n\t\t\/\/ audio.canPlayType test from http:\/\/diveintohtml5.com\/everything.html#audio-mp3\r\n\t\tif (!(player[0].canPlayType && player[0].canPlayType('audio\/mpeg;').replace(\/no\/, ''))){\r\n\t\t\tinit (swf, player.width());\r\n\t\t\tAudioPlayer.embed(id, {soundFile: this.href});\r\n\t\t}\r\n\t});\r\n};\r\n})(jQuery);<\/code><\/pre>\r\n
It uses a unique number to assign an id to each element, and lazy-initializes the Flash player. The player should be styled with a given width (since IE8 doesn't have a default <audio><\/code> size):<\/>\r\n
audio {\r\n\twidth: 80px; \r\n\tdisplay: inline-block;\r\n}<\/code><\/pre>\r\n
And use it:<\/p>\r\n
$('a[href$=mp3]').inline_mp3('\/path\/to\/player.swf');<\/code><\/pre>\r\n
And there are lots<\/a> of other packages of html5\/Flash fallback audio players<\/a> but this is small and easy enough for me to understand.","protected":false},"excerpt":{"rendered":"Download the code. Demo. Download the WP Audio Player Standalone. So the rabbi asked me to add the ability to play the audio on the taamim page (basically, a long list of short MP3's) directly on the page, rather than click the link to open a new page. No problem, right? We're living in an […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5,20],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2250"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2250"}],"version-history":[{"count":14,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2250\/revisions"}],"predecessor-version":[{"id":2264,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2250\/revisions\/2264"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}