Player

by Lazaro Contreras

HTML

<player width="500px" url="https://a.tumblr.com/tumblr_nyag1wXeQs1sdvzwso1.mp3"/>

CSS

body{
  background: black;
}
.player{
  margin-top: calc(25% - 12.5px);
  margin-left: calc(50% - 250px);
}

JavaScript

//styles
function makeFile(content,mime){
  var data = new Blob([content], {type: mime});
  return URL.createObjectURL(data);
}
var css = '*{  margin:0;  padding:0;}.player{  position:relative;  display:inline-block;  left:0;  right:0; width:100%;  height:25px;  background:#333;  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  cursor:default; overflow:hidden;}.player a.material-icons{  position:relative;  color:white;  cursor:pointer;  width:30px;  height:25px; overflow:hidden;}.player a#mute{  position:absolute;  right:128px;}.player .progress{  position:absolute;  display:block;  left:0;  right:0;  margin-left:25px;  margin-right:198px;  bottom:10px;  height:5px;  background:grey; cursor:pointer;}.player .buffer{  position:absolute;  display:block;  width:0;  height:5px;  background:rgba(255,255,255,0.5);}.player .progressCharge{  position:relative;  display:block;  width:0;  height:5px;  background:red;}.player .effects{position: absolute; display: inline-block; right:-2px; width: 50px; line-height: 25px; font-size: 13px; top: 1px; bottom: 1px; overflow:hidden;}.player .b1{position:absolute; bottom:-15px; left:0; display:inline-block; width:30%; background:white}.player .b2{position:absolute; bottom:-15px; left:32%; display:inline-block; width:30%; background:white}.player .b3{position:absolute; bottom:-15px; left:64%; display:inline-block; width:30%; background:white}.player .time{  position:absolute;  display:inline-block;  right:158px; width:35px; line-height:25px; font-size:13px; font-family:helvetica; color:white}.player .volume{  position:absolute;  display:inline-block;  right:60px;  bottom:10px;  width:70px;  height:5px;  background:grey; cursor:pointer;}.player .volumeCharge{  position:relative;  display:block;  width:100%;  height:5px;  background:red;}.player .track.pro{  position:absolute;  display:none;  top:-4px;  right:-6px;  width:13px; ...