document.addEventListener(“DOMContentLoaded”, function(event) {

var music = document.getElementById(‘music’); // id for audio element var duration; // Duration of audio clip var pButton = document.getElementById(‘pButton’); // play button var playhead = document.getElementById(‘playhead’); // playhead var timeline = document.getElementById(‘timeline’); // timeline

//load music document.getElementById(‘music’).load();

// timeline width adjusted for playhead var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// play button event listenter pButton.addEventListener(“click”, play);

// timeupdate event listener music.addEventListener(“timeupdate”, timeUpdate, false);

// makes timeline clickable timeline.addEventListener(“click”, function(event) {

moveplayhead(event);
music.currentTime = duration * clickPercent(event);

}, false);

// returns click as decimal (.77) of the total timelineWidth function clickPercent(event) {

return (event.clientX - getPosition(timeline)) / timelineWidth;

}

// makes playhead draggable playhead.addEventListener(‘mousedown’, mouseDown, false); window.addEventListener(‘mouseup’, mouseUp, false);

// Boolean value so that audio position is updated only when the playhead is released var onplayhead = false;

// mouseDown EventListener function mouseDown() {

onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);

}

// mouseUp EventListener // getting input from all mouse clicks function mouseUp(event) {

if (onplayhead == true) {
    moveplayhead(event);
    window.removeEventListener('mousemove', moveplayhead, true);
    // change current time
    music.currentTime = duration * clickPercent(event);
    music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;

} // mousemove EventListener // Moves playhead as user drags function moveplayhead(event) {

var newMargLeft = event.clientX - getPosition(timeline);

if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
    playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0) {
    playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth) {
    playhead.style.marginLeft = timelineWidth + "px";
}

}

// timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() {

var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
if (music.currentTime == duration) {
    pButton.className = "";
    pButton.className = "play";
}

}

//Play and Pause function play() {

// start music
if (music.paused) {
    music.play();
    // remove play, add pause
    pButton.className = "";
    pButton.className = "pause";
} else { // pause music
    music.pause();
    // remove pause, add play
    pButton.className = "";
    pButton.className = "play";
}

}

// Gets audio file duration music.addEventListener(“canplaythrough”, function() {

duration = music.duration;

}, false);

// getPosition // Returns elements left position relative to top-left of viewport function getPosition(el) {

return el.getBoundingClientRect().left;

}

/* DOMContentLoaded*/ });