I'm fairly new to jQuery and have decided to make a jQuery audio player for a website.
There are two versions of the way it selects the audio:
I removed some basic, not connected with the player functions. What do you think of it?
$(document).ready(function() {
function secondsTimeSpanToHMS(s) {
// this function is not mine
var m = Math.floor(s / 60); //Get remaining minutes
s -= m * 60;
return (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + Math.floor(s) : Math.floor(s)); //zero padding on minutes and seconds
}
// INDEX PLAYER
$('.play').click(function() {
var $this = $(this);
var $master = $('.master');
var id = $this.attr('id').replace(/btn/, '');
$(".play").not(this).not('.master').each(function() {
if ($(this).hasClass("active"))
$(this).click();
});
$this.toggleClass('active');
var audio = $('audio[id^="sound"]')[id - 1];
if ($this.hasClass('active')) {
$master.attr('id', $(this).attr('id'));
$this.addClass('playing');
audio.play();
$('#songlength').text(secondsTimeSpanToHMS(audio.duration));
if (!$this.hasClass("master")) {
if (!$(".master").hasClass("playing")){
$master.addClass("playing");
$master.addClass("active");
}
audio.ontimeupdate = function() {
$('.progress').css("width", (audio.currentTime / audio.duration * 100 + '%'));
$('#duration').text(secondsTimeSpanToHMS(audio.currentTime));
}
} else {
$this.removeClass('playing');
audio.pause();
if (!$this.hasClass("master")) {
if ($(".master").hasClass("playing"))
$master.removeClass("playing");
}
}
$('#slider').bind('click', function(ev) {
var $div = $(ev.target);
var $display = $div.find('#progcont');
var vW = $(window).width();
var pW = $("#progcont").width();
var offset = $div.offset();
var x = ev.clientX - offset.left;
var ProcRatio = x / pW;
audio.currentTime = ProcRatio * audio.duration;
});
});
//INDEX.HTML BIG PLAY BUTTON
$(".master").click(function() {
var $this = $(this);
var ID = $this.attr('id');
console.log(ID);
if ($this.hasClass("playing")) {
console.log("ZROBI PLAY");
$(".play").not(this).each(function() {
if ($(this).attr("id") == ID)
$(this).click();
});
} else {
console.log("ZROBI PAUSE");
$(".play").not(this).each(function() {
if ($(this).hasClass('active')) {
$(this).click();
}
});
}
});
//PLAY ON MUZYKA
$('.play2').click(function() {
var $this = $(this);
var audio = $(this).find('audio').get(0);
$(".play2").not(this).each(function() {
if ($(this).hasClass("active"))
$(this).click();
});
$this.toggleClass('active');
$('#bottomPlayer').css('bottom', '0px');
if ($this.hasClass('active')) { //LAUNCHES THE TRACK
$this.delay(6).addClass('playing');
audio.play();
audio.currentTime = 0;
$('#songlength').text(secondsTimeSpanToHMS(audio.duration));
audio.ontimeupdate = function() {
$('.progress').css("width", audio.currentTime / audio.duration * 100 + '%');
$('#duration').text(secondsTimeSpanToHMS(audio.currentTime));
}
} else {
$this.removeClass('playing');
audio.pause();
$('#bottomPlayer').css('bottom', '-50px');
}
$('#slider').bind('click', function(ev) {
var $div = $(ev.target);
var $display = $div.find('#progcont');
var vW = $(window).width();
var pW = $("#progcont").width();
var offset = $div.offset();
var x = ev.clientX - offset.left;
var ProcRatio = x / pW;
audio.currentTime = ProcRatio * audio.duration;
});
});
$('#pauseAll').click(function() {
$(".play2").each(function() {
if ($(this).hasClass("active"))
$(this).click();
});
$('#bottomPlayer').css('bottom', '-50px');
});
});