Skip to content

Instantly share code, notes, and snippets.

@willcooley
Last active August 29, 2015 14:00
Show Gist options
  • Save willcooley/11274362 to your computer and use it in GitHub Desktop.
Save willcooley/11274362 to your computer and use it in GitHub Desktop.
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.
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment