Replace HTML audio tags with jPlayer

In This post we are going to take a look at how we can replace html audio tags with jPlayer.
jPlayer is a popular jQuery player that provides consistent interface to play audio and video files in web page. This can be used as an alternative to default HTML5 audio and video tags in case you want to have an identical layout on all the web browsers.

Let’s begin with including library files. We will use javascript snippet so that same code can be reused on existing pages. The css and js files can be included from CDN and for swf file (required for flash fallback), we can dowload files from official jPlayer download site.

Include required js and css files

//create a script tag
var jsElem = document.createElement('script');
//set source attribute to jPlayer CDN
jsElem.src = 'https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.js';

//similarly for css file
cssElem = document.createElement('link');
cssElem.href = 'https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css';
cssElem.type = 'text/css';
cssElem.rel = 'stylesheet';

//append the link and script tags to body
document.body.appendChild(cssElem);
document.body.appendChild(jsElem);

Next create a function to replace audio tags with jPlayer HTML markup and initialize player

function makePlayer(obj, val, sq) {
  var playerMarkup = '
  <div id="jquery_jplayer_' + sq + '" class="jp-jplayer"></div>
  <div id="jp_container_' + sq + '" class="jp-audio" role="application" aria-label="media player">
  <div class="jp-type-playlist">
  <div class="jp-gui jp-interface">
  <div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button></div>
  <div class="jp-progress">
  <div class="jp-seek-bar">
  <div class="jp-play-bar"></div>
  </div>
  </div>
  <div class="jp-volume-controls">
  <button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button>
  <div class="jp-volume-bar">
  <div class="jp-volume-bar-value"></div>
  </div>
  </div>
  <div class="jp-time-holder">
  <div class="jp-current-time" role="timer" aria-label="time">&amp;nbsp;</div>
  <div class="jp-duration" role="timer" aria-label="duration">&amp;nbsp;</div>
  </div>
  </div>
  <div class="jp-no-solution"><span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div>
  </div>
  </div>';
  $(val).replaceWith(playerMarkup);
  $("#jquery_jplayer_" + sq).jPlayer({
	ready: function () {
		$(this).jPlayer("setMedia", {
		   mp3: obj
		}).jPlayer("play");
	},
	play: function () {
		$(this).jPlayer("pauseOthers");
	},
	solution: "flash, html",
	supplied: "mp3",
	cssSelectorAncestor: "#jp_container_" + sq,
	swfPath: "/path/to/directory/with/swf/file" //with or without trailing slash '/', both are valid.
  });
}

Final step is to call the above function on window load

$(window).load(function () {
	var idd = 1;
	$.each($('audio'), function (index, value) {
		$.each($(value).find('source'), function (i, v) {
			if (v.src.indexOf('.mp3') !== -1) {
				makePlayer(v.src, value, idd++);
			}
		});
	});
});