Enhancements for jPlayer Implementation

I love the jPlayer for easily being able to add modern mp3 support to web pages.  I wanted a few additional features, so I created this additional script which adds a few updated features:

 

  • Adding rewind/fast-forward support
  • Ability to toggle the volume controls on and off
  • Ability to specify the mp3 url by setting a 'data-audiourl' paramter.

 

The code for the additional javascript:

 

$(function () {

	$('.jp-jplayer').each(function (i, obj) {

		var jplayerId = "#" + $(this).attr('id');

		$(jplayerId).jPlayer({
			ready: function () {

				var audioUrl = $(this).attr('data-audiourl');
				
				$(this).jPlayer("setMedia", {
					mp3: audioUrl
				});
			},
			play: function () { // To avoid multiple jPlayers playing together.
				
				$(this).jPlayer("pauseOthers");
			},
			swfPath: "/js/vendor/",
			supplied: "mp3",
			wmode: "window",
			globalVolume: true,
			useStateClassSkin: true,
			autoBlur: false,
			smoothPlayBar: true,
			keyEnabled: true,
			cssSelectorAncestor: jplayerId + "_container",
		});

	});

	$(document).on('click', '.jp-play', function (e) {
		e.preventDefault();
		$(this).find('.fa-playpause').toggle();
	});

	$(document).on('click', '.jp-volume-controls-toggle', function (e) {
		e.preventDefault();
		var target = "#" + $(this).attr('data-target');
		$(target).toggle();
	});

	$(document).on('click', '.jp-back', function (e) {
		e.preventDefault();
		JpSeek($(this), -10);
	});

	$(document).on('click', '.jp-forward', function (e) {
		e.preventDefault();
		JpSeek($(this), 10);
	});

});

$(document).mouseup(HideVolume);




function HideVolume(e) {
	var container = $(".jp-volume-controls");
	
	// if the target of the click isn't the container nor a descendant of the container, and if
	if (!container.is(e.target) && container.has(e.target).length === 0 && container.is(':visible') && !$(e.target).hasClass('volume-toggle')) {
		container.hide();
	}
}

function JpSeek(el, val) {

	var playerId = el.closest('.jp-audio').attr('id').replace("_container", "");

	var jPlayerInstance = $("#" + playerId);
	var currentpos = jPlayerInstance.data("jPlayer").status.currentTime;
	var songDuration = jPlayerInstance.data("jPlayer").status.duration;
	var currentPosPercentage = currentpos / songDuration * 100;

	jPlayerInstance.jPlayer("playHead", currentPosPercentage + val); // Move play-head.
}

HTML Code

Listen to this phone lead:




Related Posts


Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post

PHP JSON Returned As Object Instead of Array

I was returning, what I thought was an array from PHP, but it kept returning it as a json object...
Read Post

A Simple Slideout Menu

I just wanted an easy slideout menu. Click on a link, and the menu slides out from the left side of the screen. Click on the link again, or somewhere else on the page, and the menu slides back in...
Read Post