powys

ongaku music player

Jun 27th, 2021 (edited)
656
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-------ongaku music player fixed for carrd! this goes inline not hidden or else it won't work------->
  2.  
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  4. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  5.  
  6. <style>
  7.  
  8. #box{
  9. overflow:hidden;
  10. position:fixed;
  11. width:18px;
  12. height:18px;
  13. top:50px; /* you can change the number or change it to bottom*/
  14. left:50px; /* you can change the number or change it to right*/
  15. /* change color of the border + background and roundness */
  16. background: #F0C2BC;
  17. border: 1px solid #FCEFED;
  18. border-radius:3px;
  19. }
  20.  
  21. #icon{
  22. /* this is for the positioning of the music gif: */
  23. margin-top:1px;
  24. margin-right:1px;
  25. -webkit-transition: all 0.5s linear;
  26. -moz-transition: all 0.5s linear;
  27. transition: all 0.5s linear;
  28. margin-bottom:8px;
  29. }
  30.  
  31. #box:hover #icon{
  32. margin-top:-20px;
  33. -webkit-transition: all 0.5s linear;
  34. -moz-transition: all 0.5s linear;
  35. transition: all 0.5s linear;
  36. }
  37.  
  38. #musicbox{
  39. width:8px;
  40. height:8px;
  41. overflow:hidden;
  42. margin-left:5px;
  43. margin-top:-1px;
  44. }
  45.  
  46. #music{
  47. margin-top: -4px;
  48. margin-left:-40px;
  49. }
  50.  
  51. .playy, .pausee {
  52. color:#fff;
  53. position: relative;
  54. bottom:-4px;
  55. left: 40px;
  56. cursor: pointer;
  57. left:20px;
  58. font-size:10px;
  59.  
  60. }
  61.  
  62. .pausee {display:none;}
  63.  
  64. .sonata {
  65. margin-left:10px;
  66. color:#fff; /* color of music note symbol */
  67. }
  68.  
  69. .labeltext {
  70. margin-left:27px;
  71. position:relative;
  72. bottom:16px;
  73. font-family: times;
  74. font-size:9px;
  75. color:#fff; /* color of song title */
  76. }
  77.  
  78. #pop {
  79. -webkit-animation: pop 1s ease-in-out infinite alternate;
  80. animation: pop 1s ease-in-out infinite alternate;
  81. -moz-animation: pop 1s ease-in-out infinite alternate;
  82. }
  83.  
  84. @keyframes pop {
  85. from {
  86. transform:scale(0.95)
  87. }
  88.  
  89. 50% {
  90. transform:scale(1)
  91. }
  92.  
  93. to {
  94. transform:scale(0.95)
  95. }
  96. }
  97.  
  98. @-webkit-keyframes pop {
  99. from {
  100. -webkit-transform:scale(0.95)
  101.  
  102. }
  103.  
  104. 50% {
  105. -webkit-transform:scale(1)
  106.  
  107. }
  108.  
  109. to {
  110. -webkit-transform:scale(0.95)
  111.  
  112. }
  113.  
  114. }
  115.  
  116. </style>
  117. <body>
  118.  
  119. <div id="box"><div id="icon">
  120. <div id="pop"><img src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"/>
  121. </div></div>
  122. <div id="musicbox"><div id="music">
  123.  
  124. <div class="music-controls" onclick="songstart();">
  125. <div class="playy">►</div>
  126. <div class="pausee">♪</div>
  127.  
  128. <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"></audio>
  129.  
  130. </div></div></div>
  131.  
  132. </body>
RAW Paste Data