NEW PROJECT: (4/24/2014) AudioPlayer I am currently working on to make into a plugin for free use. It's something I threw together over a few hours for a project I am working on with a software engineer. I know it isn't the best, but for testing purposes it works fine, haha. Will upload source code soon as a demo to play with.

audio.js

// JavaScript Document
$(document).ready(function(){

	var audioFile = $('.audio-file')[0];
	var currentPosition = audioFile.currentTime;
	var audioFileSrc = $('.audio-file > source').attr('src');
	var audioInterval;
	var sliderInterval;
	var i = $('.speaker-bar').children().length;// tells us how many child elements there are to loop through
	var n;
	var speaker;
	var speakerName;
	var speakerColor;
	var currentMarker;
	var nextMarker;
	
	// EVENT: clicking on the awesome play button to listen to Christopher Walken
	$('.audio-controls').on('click', function(){
	 //Provides your basic if else state to decide on which initial actions to take; like PLAY or PAUSE		
	  if ( $(this).hasClass('active') ) {
			$(this).removeClass('active');
			$('.audio-icon').attr('src', '../images/icon-play.png');
			PauseAudio();
		  $('.audio-option').html("PLAY");
		  }
		  
	  else{
			$(this).addClass('active');
			$('.audio-icon').attr('src', '../images/icon-pause.png');
			PlayAudio();
			$('.audio-option').html("PAUSE");
		}
	  });// ENDS: Click Event
   
	 // EVENT: mousedown scrolling through audio to set current audio position
	 $('#dragbar').mousedown(function(e){
	  // prevents default		 
	  e.preventDefault();
	  //calculates the position of the mouse in respect to a certain object on the screen
	  $(document).mousemove(function(e){
		var x = e.pageX - $('.audio-highlight').offset().left;
		//converts the mouse position into a percentage to be used from the highlight background on the div/ audio
		var conversion = ((x + 2) *100)/700;
		// changes the width of the highlight div on the instance of letting off mouse basically
		$('.audio-highlight').css("width", conversion + "%");
		//calls to set new audio position for user to view
		SetAudioPosition(conversion);
		//Updates the timer box thingy that looks neat-o
		updateProgress();

	   }) 
	 });
		  
	 $(document).mouseup(function(e){
		 $(document).unbind('mousemove');
		 });
	 	
	 function PlayAudio(){
		 audioFile.play();
		 audioInterval = setInterval(
			 updateProgress
		 , 1000); 
		 sliderInterval = setInterval(
			 SetSliderPosition,
			 CurrentlySpeaking
		 , 1); 
		 }
		 
	 function PauseAudio(){
		 audioFile.pause();
		 clearInterval(audioInterval); 
		 clearInterval(sliderInterval);
		 }
		 	 
	 function updateProgress(){
		 $('.audio-time').html( formatTime(audioFile.currentTime) + '/' + formatTime(audioFile.duration) );
		 SetSliderPosition();
		 CurrentlySpeaking();
		 }
		 
	 function formatTime(seconds) {
			minutes = Math.floor(seconds / 60);
			minutes = (minutes >= 10) ? minutes : "0" + minutes;
			seconds = Math.floor(seconds % 60);
			seconds = (seconds >= 10) ? seconds : "0" + seconds;
			return minutes + ":" + seconds;
		  }	 
	 function SetAudioPosition(value){
		 var audioPosition = (value * audioFile.duration ) / 100;
		 audioFile.currentTime = audioPosition;
		 }
		 	  
	 function SetSliderPosition(){
		 var sliderPosition = ((audioFile.currentTime * 100) / audioFile.duration);
		 $('.audio-highlight').css({ width: sliderPosition + "%" });
		 } 
		 
	 function CurrentlySpeaking(){
		var currentRatio = (audioFile.currentTime/audioFile.duration)*100;
		speaker = $('.speaker-bar > .speaker-segment:first');
	    currentMarker = speaker.data('marker');;//current audio marker
		nextMarker = speaker.next().data('marker'); //next audio marker 
		
		for ( n = 0; n < i; n++){
			
			if ( currentMarker < currentRatio){
					if( currentRatio < nextMarker ){
						console.log( currentMarker + " < " + currentRatio + " || " + currentRatio + " < " + nextMarker)
						speakerName = speaker.find(".speaker-name").html();
						speakerColor = speaker.css("background-color");
						$('.active-speaker').html( speakerName );
						$('.speaker-color').css({ "background-color": speakerColor });}
					else{
						speaker = speaker.next();
						currentMarker = speaker.data('marker');
						nextMarker = speaker.next().data('marker');
						console.log("currentMarker: " + currentMarker +  + " nextMarker: " + nextMarker)
						if (nextMarker == null){nextMarker=100;}else{}
						}
				}
			else{}// ends if statement
				
			 }
			//ENDS for loop
		 }
		 	 
	});// END: Document Ready