ongaku music player

by naocrrds

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style>

#box{
overflow:hidden;
position:fixed;
width:18px;
height:18px;
top:50px; /* You can change the number or change it to bottom*/
left:50px; /* You can change the number or change it to right*/
background: #F0C2BC;
border: 1px solid #FCEFED;
border-radius:3px;
}

#icon{
/* This is for the positioning of the music gif: */
margin-top:3px;
margin-left:2.3px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
margin-bottom:15px;
}

#box:hover #icon{
margin-top:-20px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}

#musicbox{
width:8px;
height:9px;
overflow:hidden;
margin-left:5px;
margin-top:-1px;
}

#music{
margin-top:-10px;
margin-left:-40px;
}

.playy, .pausee {
color:#fff;
position: relative;
bottom:-4px;
left: 40px;
cursor: pointer;
left:20px;
font-size:20px;

}
  
.pausee {display:none;}

</style>
<body>

<div id="box"><div id="icon">
<div id="pop"><img src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"/>
</div></div>
<div id="musicbox"><div id="music">

<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">♪</div>

<audio id="tune" src="https://dl.dropbox.com/s/qiiudgbz3z9uu3b/Puella%20Magi%20Madoka%20Magica%20Akogare%20Saita%20-%20Madoka%20Kaname%20%28Character%20Song%29.mp3"></audio>

</body>