A Pen by Michael Chambaud.

index.html

<div id="player">
  <div id="button">
    <i class="fa fa-play fa-6"></i> 
  </div>
  <div id="seek">
    <div id="handle"></div>
    <div id="progress"></div>
  </div>
</div>

Player-POC.markdown

Player POC

A Pen by Michael Chambaud on CodePen.

License.

script.js

function superFunc(centerX, centerY, value, total, radius) {
  var alpha = 360 / total * value,
      radian = (90 - alpha) * Math.PI / 180,
      x = centerX + radius * Math.cos(radian),
      y = centerY - radius * Math.sin(radian);
  
  return {
    radian: radian,
    x: x,
    y: y,
    direction: +(alpha > 180)
  }
}

// window values
var innerWidth = window.innerWidth,
    innerHeight = window.innerHeight;

// playing song values
var seek = 0,
    total = 190;

// player UI values
var radius = 250,
    centerX = innerWidth / 2,
    centerY = innerHeight / 2;


// canvas
var paper = Raphael(0, 0, innerWidth, innerHeight);

paper.customAttributes.arc = function(centerX, centerY, value, total, radius) {
    if (total == value) {
        return {path: [
            ["M", centerX, centerY - radius],
            ["A", radius, radius, 0, 1, 1, centerX - 0.01, centerY - radius]
        ]};
    } 
  
  var data = superFunc(centerX, centerY, value, total, radius);
  
  return {path: [
      ["M", centerX, centerY - radius],
      ["A", radius, radius, 0, data.direction, 1, data.x, data.y]
  ]}; 
}

// seek bar
var seekerUI = paper.circle(centerX, centerY, radius).attr({ 'stroke': '#666666', 'stroke-width': '3px'});   
var progress = paper.path().attr({arc: [centerX, centerY, seek, total, radius],'stroke': '#2dfef5','stroke-width': '12px'});
var seeker = paper.circle(centerX, centerY, radius).attr({ opacity:0, 'stroke-width': '100px'}) ;

var data = superFunc(centerX, centerY, seek, total, radius);
var handle = paper
  .circle(data.x,data.y,10)
  .attr({
  	'stroke': '',
  	'fill': '#2dfef5',
	});


seeker.drag(mouseMoving, mouseMoveStart, mouseMoveEnd);//.mouseover(mouseMove).mousemove(mouseMove);
seeker.click(function(e){
  mouseMove(e.x,e.y, true);  
});

function mouseMove(x,y, animate) {
  var angle =  Math.atan2(y - centerY, x - centerX) + Math.PI,
      p = Math.round((angle  / (2 * Math.PI)) * 100) - 25,
      percent = p <= 0 ? p + 100 : p,
      data = superFunc(centerX, centerY, (total * percent / 100), total, radius);
  
  if(animate){
    progress.animate({arc: [centerX, centerY, (total * percent / 100), total, radius]}, 250, 'linear');  
  } else {
    progress.attr({arc: [centerX, centerY, (total * percent / 100), total, radius]});
  }
  
  handle.attr({cx:data.x, cy: data.y});
}

function mouseMoving(dx,dy,x,y,e) {
  console.log({dx:dx, dy:dy, x:x, y:y, e:y});
  mouseMove(x,y)
}
function mouseMoveStart(x,y,e){
  console.log({x:x, y:y, e:y})
  //pause;
}

function mouseMoveEnd(e) {
  console.log(e)
  //play
}

style.css

body {
  background-color:#333333;
  color:white;
  position:relative;
}

#button {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
}