<style>
/* Background left */
#audioplayer{
width: 491px;
height: 155px;
margin: 0px 0px 0px 0px;
background-image:url(http://www.mooseloose.com/images/dingy.jpg);
background-repeat: no-repeat;
}
/* Background left */
#pButton{
height:30px;
width: 30px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
background-colorz:#ddd;
}
.play{background: url('http://www.mooseloose.com/images/play.png') ;}
.pause{background: url('http://www.mooseloose.com/images/pause.png') ;}
#timeline{
width: 238px;
height: 15px;
margin-top: 8px;
margin-left: 10px;
float: left;
border-radius: 10px;
background-color:#6d2634;
}
#playhead{
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: 0px;
background-color:#fff;
}
#pButton,#timeline,#playhead{
position:absolute;}
#pButton{
left:200px;
top:5px;
}
#timeline{
left:221px;
top:5px;
}
#audioplayer{position:relative;}
</style>
<audio id="music" preload="true">
<source src="http://mooseloose.com/ringydingy.mp3">
<source src="http://www.alexkatz.me/codepen/music/interlude.ogg">
</audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="play()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
<script src="moosebones.js"></script>
<script>
var music = document.getElementById('music');
var duration;
var pButton = document.getElementById('pButton');
var playhead = document.getElementById('playhead');
var timeline = document.getElementById('timeline');
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
music.addEventListener('timeupdate', timeUpdate, false);
timeline.addEventListener('click', function (event) {
window.CP.stopExecutionOnTimeout(1);
moveplayhead(event);
music.currentTime = duration * clickPercent(event);
}, false);
function clickPercent(e) {
window.CP.stopExecutionOnTimeout(2);
return (event.pageX - timeline.offsetLeft) / timelineWidth;
}
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
var onplayhead = false;
function mouseDown() {
window.CP.stopExecutionOnTimeout(3);
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
function mouseUp(e) {
window.CP.stopExecutionOnTimeout(4);
if (onplayhead == true) {
moveplayhead(e);
window.removeEventListener('mousemove', moveplayhead, true);
music.currentTime = duration * clickPercent(e);
music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;
}
function moveplayhead(e) {
window.CP.stopExecutionOnTimeout(5);
var newMargLeft = e.pageX - timeline.offsetLeft;
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';
}
}
function timeUpdate() {
window.CP.stopExecutionOnTimeout(6);
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + 'px';
if (music.currentTime == duration) {
pButton.className = '';
pButton.className = 'play';
}
}
function play() {
window.CP.stopExecutionOnTimeout(7);
if (music.paused) {
music.play();
pButton.className = '';
pButton.className = 'pause';
} else {
music.pause();
pButton.className = '';
pButton.className = 'play';
}
}
music.addEventListener('canplaythrough', function () {
window.CP.stopExecutionOnTimeout(8);
duration = music.duration;
}, false);
</script>
"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programStartTime:0,stopAllMonitoring:!1,STOP_ALL_MONITORING_TIMEOUT:2e3,fps:null,interval:100,lastLoop:0,thisLoop:null,MIN_FPS:5,MIN_FPS_WHEN_TAB_HIDDEN:.5,MAX_TIMES_BELOW_MIN_FPS:15,LAST_FPS_UPDATE_TIMEOUT:200,timesBelowMinFPS:0,programKilledSoStopMonitoring:!1,init:function(){return this.programStartTime=this._getTime(),"undefined"!=typeof __pageType&&"pen"===__pageType?0:void this.tickFPS()},shouldStopLoop:function(i){if(this.stopAllMonitoring)return!1;if(this.programKilledSoStopMonitoring)return!0;var t=this._shouldStopLoop(i);if(t)throw this.programKilledSoStopMonitoring=!0,"We've detected what seems like an infinite loop in your JavaScript. To prevent your browser from crashing, we've stopped it.";return t},_shouldStopLoop:function(){var i=this._getTime();return this._programExceededMonitoringTimeLimit(i)?(this.stopAllMonitoring=!0,!1):this._programExceededUpdateFPSTimeLimit(i)?!0:this.timesBelowMinFPS>this.MAX_TIMES_BELOW_MIN_FPS?!0:!1},_programExceededMonitoringTimeLimit:function(i){return i-this.programStartTime>this.STOP_ALL_MONITORING_TIMEOUT},_programExceededUpdateFPSTimeLimit:function(i){var t=i-this.thisLoop;return t>this.LAST_FPS_UPDATE_TIMEOUT},tickFPS:function(){return this._calcAndSaveFPSValues(),this._programExceededMonitoringTimeLimit(this.thisLoop)?(this.stopAllMonitoring=!0,!1):(this.fps<this._getMinFPS()?this.timesBelowMinFPS+=1:this.timesBelowMinFPS=0,void(this.programKilledSoStopMonitoring||this.stopAllMonitoring||setTimeout(function(){window.CP.PenTimer.tickFPS()},this.interval)))},_calcAndSaveFPSValues:function(){this.thisLoop=this._getTime(),this.fps=(1e3/(this.thisLoop-this.lastLoop)).toFixed(1),this.lastLoop=this.thisLoop},_getMinFPS:function(){return"boolean"==typeof document.hidden&&document.hidden?this.MIN_FPS_WHEN_TAB_HIDDEN:this.MIN_FPS},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(i){return window.CP.PenTimer.shouldStopLoop(i)},window.CP.stopExecutionOnTimeout=function(){return!1},window.CP.PenTimer.init();