Last active
November 30, 2016 09:33
-
-
Save TANRININresulu/0b45b69078f767a4a13ac085d90ff90c to your computer and use it in GitHub Desktop.
css edited audio player for quran114.org
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_________________________HTML________________________ | |
<div id="audio-players"></div> | |
_________________________CSS__________________________ | |
.audioplayer { | |
width: 300px; | |
height: 32px; | |
margin: auto auto auto auto; | |
background: transperant; | |
} | |
.playbutton { | |
height: 32px; | |
width: 32px; | |
border: none; | |
float: left; | |
outline: none; | |
} | |
.play { | |
background: url('https://2.bp.blogspot.com/-yZIPyxC1uOY/WD2Dh4Uk7RI/AAAAAAAAX4o/O-dmaFe_KcUjlj4q4eWzOV5Aetf8OHCpwCLcB/s1600/play.png'); | |
} | |
.pause { | |
background: url('https://2.bp.blogspot.com/-OAOkuNJI0uY/WD2FBWfDLsI/AAAAAAAAX4w/5WUNuxJJMpUiQv_xnDxAqCVwRdjSADAOQCLcB/s1600/pause.png'); | |
} | |
.play, | |
.pause { | |
background-size: 38% 44%; | |
background-repeat: no-repeat; | |
background-position: center; | |
} | |
.timeline { | |
width: 86%; | |
height: 2px; | |
margin-top: 14px; | |
float: left; | |
border-radius: 4px; | |
background: #ddd; | |
} | |
.playhead { | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
margin-top: -5px; | |
background: #4285F4; | |
cursor: pointer; | |
} | |
___________________________JS___________________________ | |
// Event listener for DOM | |
document.addEventListener("DOMContentLoaded", theDOMHasLoaded, false); | |
// array of audio files (stored in a folder called music) | |
var files = ["1919.mp3", // 0 | |
"7pmmk0hsv30qqme/1.mp3", // 1 | |
"vxgoszr3asflz3f/2.mp3", // 2 | |
"24bpykxaanihpzw/3.mp3", // 3 | |
"avp6hy9l6ete9dg/4.mp3", // 4 | |
"jiib8z8oohoafux/5.mp3", // 5 | |
"5fjorelfnm09uns/6.mp3", // 6 | |
"7v0tkuakybmayf5/7.mp3", // 7 | |
"uhgcb6kgdcjbxl7/8.mp3", // 8 | |
"74rm4kjgf3t05xv/9.mp3", // 9 | |
"qpsn5kiwsvw8nar/10.mp3", // 10 | |
"umm03d2rcvqzl2f/11.mp3", // 11 | |
"b4i5gef734o7e7z/12.mp3", // 12 | |
"wx2f95svbojwez8/13.mp3", // 13 | |
"12dl8xqn7fpejsj/14.mp3", // 14 | |
"eb1oqczhxk6gis0/15.mp3", // 15 | |
"9s0cz2be0mi4bgo/16.mp3", // 16 | |
"cj8ksy9xamwul17/17.mp3", // 17 | |
"yavitj20lyzpa1m/18.mp3", // 18 | |
"fbvjxe7ugsrsg02/19.mp3", // 19 | |
"wolxt645oamoh23/20.mp3", // 20 | |
"o4drbpbze4zfihu/21.mp3", // 21 | |
"xzl06lgodb931hz/22.mp3", // 22 | |
"6wj5yhvp8v6umr4/23.mp3", // 23 | |
"gvfp7jgor42t3ge/24.mp3", // 24 | |
"p2wrrlw5glo9b49/25.mp3", // 25 | |
"uvkr5mlc3sxls3l/26.mp3", // 26 | |
"8e4l0l78a9z7tif/27.mp3", // 27 | |
"pu0x19439gmp7dk/28.mp3", // 28 | |
"rj792nzgt0gfzbw/29.mp3", // 29 | |
"6dxz2pze1fe2sic/30.mp3", // 30 | |
"mx9lxb59n72ym68/31.mp3", // 31 | |
"upjm5rqfjbwbffz/32.mp3", // 32 | |
"vr0bystb6t25db3/33.mp3", // 33 | |
"euvozn0neyn3t7p/34.mp3", // 34 | |
"kvli2srqkeboyqn/35.mp3", // 35 | |
"zetxqth8d0vrc90/36.mp3", // 36 | |
"lfkpzav0vcz744z/37.mp3", // 37 | |
"9ksccs4dlgbtkne/38.mp3", // 38 | |
"u60s9su5xn0kh1a/39.mp3", // 39 | |
"ph885gdeuaagbsz/40.mp3", // 40 | |
"nml09r6tktf3m3c/41.mp3", // 41 | |
"z7zqf5v7m9yo9u5/42.mp3", // 42 | |
"m1mha64l2irymrx/43.mp3", // 43 | |
"fnu7itximq52o6w/44.mp3", // 44 | |
"p5vnza4zcj1ko1y/45.mp3", // 45 | |
"lp02pziti3kvsuj/46.mp3", // 46 | |
"3blgyvzw949tvvh/47.mp3", // 47 | |
"xm8q13pcj2s5sij/48.mp3", // 48 | |
"f48ssjjpqacal6h/49.mp3", // 49 | |
"dg96qjmbv12wunt/50.mp3", // 50 | |
"vhzr0b117k9xrrc/51.mp3", // 51 | |
"0iqj4418ge8bvve/52.mp3", // 52 | |
"r47tdkhjzv3cr3l/53.mp3", // 53 | |
"yv1funuva281uhr/54.mp3", // 54 | |
"9qcocq4ji3vpgo8/55.mp3", // 55 | |
"pnoc4n6qnskmbgb/56.mp3", // 3 | |
"64qrbg5gtljg4xp/57.mp3", // 3 | |
"ke577mptitrdjh5/58.mp3", // 3 | |
"n1rmpqoirihfpkn/59.mp3", // 3 | |
"z2zu4q38sbscowi/60.mp3", // 3 | |
"z6ibvdtuwo3or3w/61.mp3", // 3 | |
"knb5qgqg8pcad6y/62.mp3", // 3 | |
"j46o59346oy43ix/63.mp3", // 3 | |
"zpthuadheqc897v/64.mp3", // 3 | |
"0q9xrda1xg5qdk4/65.mp3", // 3 | |
"7jhfdnqcd873hfm/66.mp3", // 3 | |
"yqyr3vzk7wuwwip/67.mp3", // 3 | |
"u4buv6yrtwtfxsa/68.mp3", // 3 | |
"17nt3ha2gy7m3d9/69.mp3", // 3 | |
"gzcepqwhvmoz6q3/70.mp3", // 3 | |
"j9sntm1ei27kg49/71.mp3", // 3 | |
"elb3pfm9ohpha95/72.mp3", // 3 | |
"13cgkvzpq73p3tb/73.mp3", // 3 | |
"ajoe8qw0coxj46h/74.mp3", // 3 | |
"u543c258bt905ef/75.mp3", // 3 | |
"hs3oguwz1rjlk2s/76.mp3", // 3 | |
"nr47hcpoy3d78r8/77.mp3", // 3 | |
"75f2z0vvktc9cwd/78.mp3", // 3 | |
"w90oyk2j9wi5l69/79.mp3", // 3 | |
"hw4g42abf8fm0fg/80.mp3", // 3 | |
"tkcvpcbr3nvbw1d/81.mp3", // 3 | |
"rtn40hupklmgrbi/82.mp3", // 3 | |
"g3p98fjso724m9i/83.mp3", // 3 | |
"x0a9iceq4qiufwr/84.mp3", // 3 | |
"ltrnhgxd5risq5d/85.mp3", // 3 | |
"qpsomggb0wqinuy/86.mp3", // 3 | |
"0xwhoe0wcsejzfv/87.mp3", // 3 | |
"z4l79j6iiuhc2v0/88.mp3", // 3 | |
"ri5vgfhp94roaaq/89.mp3", // 3 | |
"qiomblp34acn4qt/90.mp3", // 3 | |
"khoa4g4y94t88fp/91.mp3", // 3 | |
"0fdq49r33sr00l8/92.mp3", // 3 | |
"zwhkaatxvqarmup/93.mp3", // 3 | |
"9jpubk1pkja3i9n/94.mp3", // 3 | |
"idpyf7s2910ibn8/95.mp3", // 3 | |
"xfatrvds292tkg2/96.mp3", // 3 | |
"ram8sgrg02u7pwo/97.mp3", // 3 | |
"4o59y5pg85mmgmf/98.mp3", // 3 | |
"rwstl0ajuwry8qy/99.mp3", // 3 | |
"pgxx00bv9o5cs7t/100.mp3", // 3 | |
"z1l6zduulpzmr6g/101.mp3", // 3 | |
"a78chtj612rb2vg/102.mp3", // 3 | |
"y72cxw829a39k1t/103.mp3", // 3 | |
"zb9fiqsmkkpbmwl/104.mp3", // 3 | |
"mp0c6yjm9kgwvuf/105.mp3", // 3 | |
"hznyc0tdd691mj7/106.mp3", // 3 | |
"ya2h4tc3ksrfya4/107.mp3", // 3 | |
"n2fmlwylybyfobd/108.mp3", // 3 | |
"wuykyd7zu2rq7ao/109.mp3", // 3 | |
"d834n6s1598z5ux/110.mp3", // 3 | |
"rwmz23np9w5oroh/111.mp3", // 3 | |
"ycfwyavr1q9guel/112.mp3", // 3 | |
"szu3icoygmwyjyn/113.mp3", // 3 | |
"1z3cwe7gmaedm30/114.mp3" // | |
]; | |
/////////////////////////////////////////////// | |
// Find and store audio info | |
/////////////////////////////////////////////// | |
// array for AudioObjects | |
var audioList = []; | |
// components and the index for their AudioObject | |
var componentDict = {}; | |
// store AudioObject that is currently playing | |
var playingAudio = null; | |
// store playhead id if one is being dragged | |
var onplayhead = null; | |
/* AudioObject Constructor */ | |
function AudioObject(audio, duration) { | |
this.audio = audio; | |
this.id = audio.id; | |
this.duration = duration; | |
} | |
/* bindAudioPlayer | |
* Store audioplayer components in correct AudioObject | |
* num identifes correct audioplayer | |
*/ | |
AudioObject.prototype.bindAudioPlayer = function (num) { | |
this.audioplayer = document.getElementById("audioplayer-" + num); | |
this.playbutton = document.getElementById("playbutton-" + num); | |
this.timeline = document.getElementById("timeline-" + num); | |
this.playhead = document.getElementById("playhead-" + num); | |
this.timelineWidth = this.timeline.offsetWidth - this.playhead.offsetWidth | |
} | |
/* addEventListeners() */ | |
AudioObject.prototype.addEventListeners = function () { | |
this.audio.addEventListener("timeupdate", AudioObject.prototype.timeUpdate, false); | |
this.audio.addEventListener("durationchange", AudioObject.prototype.durationChange, false); | |
this.timeline.addEventListener("click", AudioObject.prototype.timelineClick, false); | |
this.playbutton.addEventListener("click", AudioObject.prototype.pressPlay, false); | |
// Makes playhead draggable | |
this.playhead.addEventListener('mousedown', AudioObject.prototype.mouseDown, false); | |
window.addEventListener('mouseup', mouseUp, false); | |
} | |
/* populateAudioList */ | |
function populateAudioList() { | |
var audioElements = document.getElementsByClassName("audio"); | |
for (i = 0; i < audioElements.length; i++) { | |
audioList.push( | |
new AudioObject(audioElements[i], 0) | |
); | |
audioList[i].bindAudioPlayer(i); | |
audioList[i].addEventListeners(); | |
} | |
} | |
/* populateComponentDictionary() | |
* {key=element id : value=index of audioList} */ | |
function populateComponentDictionary() { | |
for (i = 0; i < audioList.length; i++) { | |
componentDict[audioList[i].audio.id] = i; | |
componentDict[audioList[i].playbutton.id] = i; | |
componentDict[audioList[i].timeline.id] = i; | |
componentDict[audioList[i].playhead.id] = i; | |
} | |
} | |
/////////////////////////////////////////////// | |
// Update Audio Player | |
/////////////////////////////////////////////// | |
/* durationChange | |
* set duration for AudioObject */ | |
AudioObject.prototype.durationChange = function () { | |
var ao = audioList[getAudioListIndex(this.id)]; | |
ao.duration = this.duration; | |
} | |
/* pressPlay() | |
* call play() for correct AudioObject | |
*/ | |
AudioObject.prototype.pressPlay = function () { | |
var index = getAudioListIndex(this.id); | |
audioList[index].play(); | |
} | |
/* play() | |
* play or pause selected audio, if there is a song playing pause it | |
*/ | |
AudioObject.prototype.play = function () { | |
if (this == playingAudio) { | |
playingAudio = null; | |
this.audio.pause(); | |
changeClass(this.playbutton, "playbutton play"); | |
} | |
// else check if playing audio exists and pause it, then start this | |
else { | |
if (playingAudio != null) { | |
playingAudio.audio.pause(); | |
changeClass(playingAudio.playbutton, "playbutton play"); | |
} | |
this.audio.play(); | |
playingAudio = this; | |
changeClass(this.playbutton, "playbutton pause"); | |
} | |
} | |
/* timelineClick() | |
* get timeline's AudioObject | |
*/ | |
AudioObject.prototype.timelineClick = function (event) { | |
var ao = audioList[getAudioListIndex(this.id)]; | |
ao.audio.currentTime = ao.audio.duration * clickPercent(event, ao.timeline, ao.timelineWidth); | |
} | |
/* mouseDown */ | |
AudioObject.prototype.mouseDown = function (event) { | |
onplayhead = this.id; | |
var ao = audioList[getAudioListIndex(this.id)]; | |
window.addEventListener('mousemove', AudioObject.prototype.moveplayhead, true); | |
ao.audio.removeEventListener('timeupdate', AudioObject.prototype.timeUpdate, false); | |
} | |
/* mouseUp EventListener | |
* getting input from all mouse clicks */ | |
function mouseUp(e) { | |
if (onplayhead != null) { | |
var ao = audioList[getAudioListIndex(onplayhead)]; | |
window.removeEventListener('mousemove', AudioObject.prototype.moveplayhead, true); | |
// change current time | |
ao.audio.currentTime = ao.audio.duration * clickPercent(e, ao.timeline, ao.timelineWidth); | |
ao.audio.addEventListener('timeupdate', AudioObject.prototype.timeUpdate, false); | |
} | |
onplayhead = null; | |
} | |
/* mousemove EventListener | |
* Moves playhead as user drags */ | |
AudioObject.prototype.moveplayhead = function (e) { | |
var ao = audioList[getAudioListIndex(onplayhead)]; | |
var newMargLeft = e.pageX - ao.timeline.offsetLeft; | |
if (newMargLeft >= 0 && newMargLeft <= ao.timelineWidth) { | |
document.getElementById(onplayhead).style.marginLeft = newMargLeft + "px"; | |
} | |
if (newMargLeft < 0) { | |
playhead.style.marginLeft = "0px"; | |
} | |
if (newMargLeft > ao.timelineWidth) { | |
playhead.style.marginLeft = ao.timelineWidth + "px"; | |
} | |
} | |
/* timeUpdate | |
* Synchronizes playhead position with current point in audio | |
* this is the html audio element | |
*/ | |
AudioObject.prototype.timeUpdate = function () { | |
// audio element's AudioObject | |
var ao = audioList[getAudioListIndex(this.id)]; | |
var playPercent = ao.timelineWidth * (ao.audio.currentTime / ao.duration); | |
ao.playhead.style.marginLeft = playPercent + "px"; | |
// If song is over | |
if (ao.audio.currentTime == ao.duration) { | |
changeClass(ao.playbutton, "playbutton play"); | |
ao.audio.currentTime = 0; | |
ao.audio.pause(); | |
playingAudio = null; | |
} | |
} | |
/////////////////////////////////////////////// | |
// Utility Methods | |
/////////////////////////////////////////////// | |
/* changeClass | |
* overwrites element's class names */ | |
function changeClass(element, newClasses) { | |
element.className = newClasses; | |
} | |
/* getAudioListIndex | |
* Given an element's id, find the index in audioList for the correct AudioObject */ | |
function getAudioListIndex(id) { | |
return componentDict[id]; | |
} | |
/* clickPercent() | |
* returns click as decimal (.77) of the total timelineWidth */ | |
function clickPercent(e, timeline, timelineWidth) { | |
return (e.pageX - timeline.offsetLeft) / timelineWidth; | |
} | |
/////////////////////////////////////////////// | |
// GENERATE HTML FOR AUDIO ELEMENTS AND PLAYERS | |
/////////////////////////////////////////////// | |
/* createAudioElements | |
* create audio elements for each file in files */ | |
function createAudioElements() { | |
for (f in files) { | |
k = 2; | |
if(f==k){ | |
var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"https://dl.dropboxusercontent.com/s/" + files[f] + "\"></audio>"; | |
$("#audio-players").append(audioString); | |
} | |
} | |
} | |
/* createAudioPlayer | |
* create a general audio player for files */ | |
function createAudioPlayer() { | |
var playerString = " <div id=\"audioplayer-" + 0 + "\" class=\"audioplayer\"><button id=\"playbutton-" + 0 + "\" class=\"play playbutton\"></button><div id=\"timeline-" + 0 + "\" class=\"timeline\"><div id=\"playhead-" + 0 + "\" class=\"playhead\"></div></div></div>"; | |
$("#audio-players").append(playerString); | |
} | |
/* theDOMHasLoaded() | |
* Execute when DOM is loaded */ | |
function theDOMHasLoaded(e) { | |
// Generate HTML for audio elements and audio players | |
createAudioElements(); | |
createAudioPlayer(); | |
// Populate Audio List | |
populateAudioList(); | |
populateComponentDictionary(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment