API tools faq
paste
tangycode

rifkimy page

tangycode
May 21st, 2020
659
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>babbling brook</title>
  6. <link rel="shortcut icon" href="https://66.media.tumblr.com/6ac89ccc556323b003e5d8e28ea10a96/tumblr_inline_npbhnyiSbH1ry72eo_75sq.gif">
  7. <link rel="stylesheet" type="text/css" href="music/player/css/player.css">
  8. <link rel ="stylesheet" href="music/player/assets/css/all.css">
  9.  
  10. <script type="text/javascript">
  11. document.addeventListener("DOMContentLoaded", function(event) {
  12.  
  13. var music = document.getElementById('music');
  14. var duration = music.duration;
  15. var play = document.getElementById('fas fa-play');
  16. var pause = document.getElementById('fas fa-pause');
  17. var playhead = document.getElementById('playhead');
  18. var timeline = document.getElementById('timeline');
  19. var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
  20.  
  21. play.addEventListener("click", play);
  22.  
  23. music.addEventListener("timeupdate", timeUpdate, false);
  24.  
  25. timeline.addEventListener("click", function(event) {
  26. moveplayhead(event);
  27. music.currentTime = duration *
  28. clickPercent(event);
  29. }, false);
  30.  
  31. function clickPercent(event) {
  32. return(event.clientX - getPosition(timeline)) / timelineWidth;
  33. }
  34.  
  35. playhead.addEventListener('mousedown', mouseDown, false);
  36. window.addEventListener('mouseup', mouseUp, false);
  37. var onplayhead = false;
  38.  
  39. function mouseDown() {
  40. onplayhead = true;
  41. window.addEventListener('mousemove', moveplayhead, true);
  42. music.removeEventListener('timeupdate', timeUpdate, false);
  43. }
  44.  
  45. function mouseUp(event) {
  46. if (onplayhead == true) {
  47. moveplayhead(event);
  48. window.removeEventListener('mousemove', moveplayhead, true);
  49. music.currentTime = duration * clickPercent(event);
  50. music.addEventListener('timeupdate', timeUpdate, false);
  51. }
  52. onplayhead=false;
  53. }
  54.  
  55. function moveplayhead(event) {
  56. var newMargLeft = event.clientX - getPosition(timeline);
  57.  
  58. if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
  59. playhead.style.marginLeft = newMargLeft + "px";
  60. }
  61. if (newMargLeft < 0) {
  62. playhead.style.marginLeft = "0px";
  63. }
  64. if (newMargLeft > timelineWidth) {
  65. playhead.style.marginLeft = timelineWidth + "px";
  66. }
  67. }
  68.  
  69. function timeUpdate() {
  70. var playPercent = timelineWidth * (music.currentTime / duration);
  71. playhead.style.marginLeft = playPercent + "px";
  72. if (music.currentTime == duration) {
  73. play.className = "";
  74. play.className = "fas fa-play";
  75. }
  76. }
  77.  
  78. function play() {
  79. if (music.paused) {
  80. music.play();
  81. }
  82. }
  83.  
  84. function pause() {
  85.  
  86. }
  87.  
  88. });
  89. </script>
  90.  
  91. <style type="text/css">
  92.  
  93. * {
  94. box-sizing:border-box;
  95. }
  96.  
  97. body {
  98. background-image:url('/graphics/denseforest.jpg');
  99. background-attachment:fixed;
  100. background-position:bottom;
  101. background-size:cover;
  102. background-repeat:no-repeat;
  103. color:#fff;
  104. font-size:14px;
  105. font-family:times;
  106. }
  107.  
  108. a {
  109. color:#fff;
  110. -moz-transition-duration: 0.5s;
  111. -o-transition-duration: 0.5s;
  112. -webkit-transition-duration: 0.5s;
  113. transition-duration: 0.5s;
  114. }
  115.  
  116. a:hover {
  117. text-transform:uppercase;
  118. -moz-transition-duration: 0.5s;
  119. -o-transition-duration: 0.5s;
  120. -webkit-transition-duration: 0.5s;
  121. transition-duration: 0.5s;
  122. }
  123.  
  124. .container {
  125. width:1000px;
  126. overflow:hidden;
  127. margin:0 auto;
  128. text-align:center;
  129. }
  130.  
  131. .intro {
  132. margin:0 auto;
  133. margin-top:75px;
  134. width:500px;
  135. height:150px;
  136. padding:15px;
  137. background:#000;
  138. border-radius:25px;
  139. border:2px solid #fff;
  140. }
  141.  
  142. .back {
  143. margin: 0 auto;
  144. margin-top:40px;
  145. height:40px;
  146. width:75px;
  147. background:#000;
  148. border-radius:25px;
  149. border: 2px solid #fff;
  150. -moz-transition-duration: 0.5s;
  151. -o-transition-duration: 0.5s;
  152. -webkit-transition-duration: 0.5s;
  153. transition-duration: 0.5s;
  154. }
  155.  
  156. .back:hover {
  157. border-radius:5px;
  158. -moz-transition-duration: 0.5s;
  159. -o-transition-duration: 0.5s;
  160. -webkit-transition-duration: 0.5s;
  161. transition-duration: 0.5s;
  162. }
  163.  
  164. #player {
  165. background:#000;
  166. border:2px solid #fff;
  167. border-radius:25px;
  168. width:200px;
  169. height:200px;
  170. margin-top:25px;
  171. float:right;
  172. padding:5px;
  173. }
  174.  
  175. </style>
  176. </head>
  177. <body>
  178. <div class="container">
  179. <div class="intro">
  180. </div>
  181. <div class="back"></div>
  182. <div id="player">
  183. <audio id="music" preload="true">
  184. <source src="music/rifkimy/_Quarantine (from First Man)_ by Justin Hurwitz.mp3" type="audio/mpeg"/>
  185. <source src="music/rifkimy/AKIRA soundtrack - Geinoh Yamashirogumi - _Kaneda_.mp3" type="audio/mpeg"/>
  186. <source src="music/rifkimy/Beautiful Instrumental Fantasy Music - The Magical Realm - Celestial Aeon Project.mp3" type="audio/mpeg"/>
  187. <source src="music/rifkimy/Celtic Elven Music - Lament of The Shadow Elves.mp3" type="audio/mpeg"/>
  188. <source src="music/rifkimy/Daemonia Nymphe - Nature's Metamorphosis.mp3" type="audio/mpeg"/>
  189. <source src="music/rifkimy/Floex - Veronika's dream.mp3" type="audio/mpeg"/>
  190. <source src="music/rifkimy/Hollow Knight OST - Greenpath.mp3" type="audio/mpeg"/>
  191. <source src="music/rifkimy/Journey Soundtrack (Austin Wintory) - 01. Nascence.mp3" type="audio/mpeg"/>
  192. <source src="music/rifkimy/Merry-Go-Round of Life (From _Howl's Moving Castle_).mp3" type="audio/mpeg"/>
  193. <source src="music/rifkimy/Minecraft (from _Minecraft Volume Alpha_).mp3" type="audio/mpeg"/>
  194. <source src="music/rifkimy/Redwood Colonnade.mp3" type="audio/mpeg"/>
  195. <source src="music/rifkimy/Riven Soundtrack - 04 Jungle Totem.mp3" type="audio/mpeg"/>
  196. <source src="music/rifkimy/Samorost 2 Soundtrack - 07 Budoar.mp3" type="audio/mpeg"/>
  197. <source src="music/rifkimy/Samorost 3 Soundtrack 03 - Mushroom Picker Dance (Floex).mp3" type="audio/mpeg"/>
  198. <source src="music/rifkimy/Tanememi.mp3" type="audio/mpeg"/>
  199. <source src="music/rifkimy/Tree Dwellers.mp3" type="audio/mpeg"/>
  200. <source src="music/rifkimy/Utai IV_ Reawakening.mp3" type="audio/mpeg"/>
  201.  
  202. Your browser does not support the audio element.
  203. </audio>
  204. <button class="fas fa-play" onclick="play()"></button>
  205. <button class="fas fa-pause" onclick="pauseAudio()"></button>
  206. </div>
  207. </div>
  208. </body>
  209. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!