html, body, .view { height: 100%; } #mobile-box { width: 360px; } .gradient-card { /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(220, 66, 37, 0.5)), color-stop(100%, rgba(0, 47, 75, 0.5))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 47, 75, 0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 47, 75, 0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */ /* IE10+ */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 47, 75, 0.5)), to(rgba(220, 66, 37, 0.5))); background: linear-gradient(to bottom, rgba(0, 47, 75, 0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002f4b', endColorstr='#00000000', GradientType=0); /* IE6-9 */ } .card { -webkit-border-radius: 10px; border-radius: 10px; } .card .view { -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; } .card h5 a { color: #0d47a1; } .card h5 a:hover { color: #072f6b; } #pButton { float: left; } #timeline { width: 90%; height: 2px; margin-top: 20px; margin-left: 10px; float: left; -webkit-border-radius: 15px; border-radius: 15px; background: rgba(0, 0, 0, 0.3); } #pButton { margin-top: 12px; cursor: pointer; } #playhead { width: 8px; height: 8px; -webkit-border-radius: 50%; border-radius: 50%; margin-top: -3px; background: black; cursor: pointer; }

var music = document.getElementById('music'); // id for audio element var duration = music.duration; // Duration of audio clip, calculated here for embedding purposes var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('playhead'); // playhead var timeline = document.getElementById('timeline'); // timeline // 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 = "fas fa-play"; } } //Play and Pause function play() { // start music if (music.paused) { music.play(); // remove play, add pause pButton.className = ""; pButton.className = "fas fa-pause"; } else { // pause music music.pause(); // remove pause, add play pButton.className = ""; pButton.className = "fas fa-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; }