musicweb work

HTML 5 audio player

by spydmobile

HTML

<audio id="music" preload="metadata">
  <source id='mp3src' src="" type="audio/mpeg">

</audio>
<div id="audioplayer">
  <button id="pButton" class="play" onclick="play()"></button>
  <div id="timeline">
    <div id="playhead"></div>
  </div>
</div>

<button id="jump" class="jump" onclick="moveplayhead(20)"></button>

CSS

#audioplayer {
  width: 480px;
  height: 60px;
  margin: 50px auto auto auto;
  border: solid;
}

#pButton {
  height: 60px;
  width: 60px;
  border: none;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  outline: none;
}

.play {
  background: url('http://www.alexkatz.me/codepen/images/play.png');
}

.pause {
  background: url('http://www.alexkatz.me/codepen/images/pause.png');
}

#timeline {
  width: 400px;
  height: 20px;
  margin-top: 20px;
  float: left;
  border-radius: 15px;
  background: rgba(0, 0, 0, .3);
}

#playhead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(0, 0, 0, 1);
}

JavaScript

var oldwithyou = "https://drive.google.com/file/d/0B8tfRVF7R8ztS0xxOC1Qb3pIN2s/view?usp=sharing";

var input = oldwithyou;

var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)

var googleDriveFileID = res[1];

var mprsrc = "http://docs.google.com/uc?export=open&id=" + googleDriveFileID

var music = document.getElementById('music'); // id for audio element

var musicMp3Src = document.getElementById('mp3src');
musicMp3Src.src = mprsrc;
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
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;



// 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(e) {
  return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that mouse is moved on mouseUp 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(e) {
  if (onplayhead == true) {
    moveplayhead(e);
    window.removeEventListener('mousemove', moveplayhead, true);
    // change current time
    music.currentTime = duration * clickPercent(e);
    music.addEventListener('timeupdate', timeUpdate,...