Skip to content

Instantly share code, notes, and snippets.

@TANRININresulu

TANRININresulu/gist:0b45b69078f767a4a13ac085d90ff90c

Last active November 30, 2016 09:33
Show Gist options
  • Save TANRININresulu/0b45b69078f767a4a13ac085d90ff90c to your computer and use it in GitHub Desktop.
Save TANRININresulu/0b45b69078f767a4a13ac085d90ff90c to your computer and use it in GitHub Desktop.
Download ZIP
css edited audio player for quran114.org
Raw
gistfile1.txt
_________________________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