API tools faq
paste
dollcrds

cr elroseria ib renbowia misc

dollcrds
Jun 3rd, 2024 (edited)
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.97 KB | None | 0 0
raw download clone embed print report
  1. ---MUSIC PLAYER---
  2. <!-----
  3.  
  4. multiple song music player by adilene @ adilene.net. free to use and edit as you like! credit is not necessary, but it is appreciated! <3
  5.  
  6. if you need any help feel free to reach out to me at adilene.net!
  7.  
  8. source code: https://github.com/sayantanm19/js-music-player
  9.  
  10. ----->
  11.  
  12. <head>
  13. <script src="https://unpkg.com/phosphor-icons"></script>
  14.  
  15. <style>
  16. @font-face {
  17. src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
  18. font-family: jojoba;
  19. }
  20.  
  21. #musicplayer {
  22. position: relative;
  23. }
  24.  
  25. .songtitle {
  26. font-family: Nintendo-DS-BIOS;
  27. font-size: 1em;
  28. color: #FEC5E5;
  29. color: white;
  30. -webkit-filter: drop-shadow(0px 0px 1px #4F4F4F);
  31. }
  32.  
  33. .controls {
  34. font-size: 21px !important;
  35. text-align: center;
  36. width: 100%;
  37. }
  38.  
  39. .controls td {
  40. padding: 0px 5px 0px 5px;
  41. }
  42.  
  43. .seeking {
  44. display: flex;
  45. justify-content: space-evenly;
  46. }
  47.  
  48. .current-time {
  49. padding-right: 5px;
  50. font-family: jojoba;
  51. font-size: 1em;
  52. color: #4F4F4F;
  53. }
  54.  
  55. .total-duration {
  56. padding-left: 5px;
  57. font-family: jojoba;
  58. font-size: 1em;
  59. color: #4F4F4F;
  60. }
  61.  
  62. input[type=range] {
  63. -webkit-appearance: none;
  64. width: 100%;
  65. background-color: transparent;
  66. }
  67.  
  68. input[type=range]:focus {
  69. outline: none;
  70. }
  71.  
  72. input[type=range]::-webkit-slider-runnable-track {
  73. width: 100%;
  74. height: 2px;
  75. cursor: help;
  76. animate: 0.2s;
  77. background: #FEC5E5;
  78. border-radius: 1px;
  79. }
  80.  
  81. input[type=range]::-webkit-slider-thumb {
  82. border: 0px solid #FEC5E5;
  83. height: 10px;
  84. width: 10px;
  85. border-radius: 10px;
  86. background: #FEC5E5;
  87. cursor: help;
  88. -webkit-appearance: none;
  89. margin-top: -4px;
  90. }
  91.  
  92. input[type=range]:focus::-webkit-slider-runnable-track {
  93. background: #FEC5C5;
  94. }
  95.  
  96. input[type=range]::-moz-range-track {
  97. width: 100%;
  98. height: 1px;
  99. cursor: help;
  100. animate: 0.2s;
  101. background: #FEC5E5;
  102. border-radius: 99px;
  103. }
  104.  
  105. input[type=range]::-moz-range-thumb {
  106. border: 0px solid #FEC5E5;
  107. height: 10px;
  108. width: 10px;
  109. border-radius: 10px;
  110. background: #FEC5E5;
  111. cursor: help;
  112. }
  113.  
  114. input[type=range]::-ms-track {
  115. width: 100%;
  116. height: 2px;
  117. cursor: help;
  118. animate: 0.2s;
  119. background: transparent;
  120. border-color: transparent;
  121. color: transparent;
  122. }
  123.  
  124. input[type=range]::-ms-fill-lower {
  125. background: #FEC5E5;
  126. border-radius: 2px;
  127. }
  128.  
  129. input[type=range]::-ms-fill-upper {
  130. background: #FEC5E5;
  131. border-radius: 2px;
  132. }
  133.  
  134. input[type=range]::-ms-thumb {
  135. margin-top: 1px;
  136. border: 0px solid #FEC5E5;
  137. height: 10px;
  138. width: 10px;
  139. border-radius: 10px;
  140. background: #FEC5E5;
  141. cursor: help;
  142. }
  143.  
  144. input[type=range]:focus::-ms-fill-lower {
  145. background: #FEC5E5;
  146. }
  147.  
  148. input[type=range]:focus::-ms-fill-upper {
  149. background: #FEC5E5;
  150. }
  151. </style>
  152. </head>
  153.  
  154. <body>
  155. <div id="musicplayer">
  156. <div>
  157.  
  158. <div class="songtitle"></div>
  159.  
  160. <table class="controls">
  161. <tr>
  162. <td>
  163. <div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #FEC5E5"></i></div>
  164. </td>
  165. <td>
  166. <div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #FEC5E5"></i></div>
  167. </td>
  168. <td>
  169. <div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #FEC5E5"></i></div>
  170. </td>
  171. </tr>
  172. </table>
  173.  
  174. <div class="seeking">
  175. <div class="current-time">00:00</div>
  176.  
  177. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  178.  
  179. <div class="total-duration">0:00</div>
  180. </div>
  181.  
  182. <audio id="music" src=""></audio>
  183. </div>
  184. </div>
  185.  
  186. <script>
  187. let track_name = document.querySelector(".songtitle");
  188.  
  189. let playpause_btn = document.querySelector(".playpause-track");
  190. let next_btn = document.querySelector(".next-track");
  191. let prev_btn = document.querySelector(".prev-track");
  192.  
  193. let seek_slider = document.querySelector(".seek_slider");
  194. let curr_time = document.querySelector(".current-time");
  195. let total_duration = document.querySelector(".total-duration");
  196.  
  197. let track_index = 0;
  198. let isPlaying = false;
  199. let updateTimer;
  200.  
  201. // Create new audio element
  202. let curr_track = document.getElementById("music");
  203.  
  204. //
  205. // DEFINE YOUR SONGS HERE!!!!!
  206. // MORE THAN FOUR SONGS CAN BE ADDED!!
  207. // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  208. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  209. let track_list = [
  210. {
  211. name:"SONG by ARTIST",
  212. path:"SONG LINK"
  213. },
  214. {
  215. name:"SONG by ARTIST",
  216. path:"SONG LINK"
  217. },
  218. {
  219. name:"SONG by ARTIST",
  220. path:"SONG LINK"
  221. },
  222. {
  223. name:"SONG by ARTIST",
  224. path:"SONG LINK"
  225. },
  226. ];
  227.  
  228. function loadTrack(track_index) {
  229. clearInterval(updateTimer);
  230. resetValues();
  231.  
  232. // Load a new track
  233. curr_track.src = track_list[track_index].path;
  234. curr_track.load();
  235.  
  236. // Set an interval of 1000 milliseconds for updating the seek slider
  237. updateTimer = setInterval(seekUpdate, 1000);
  238.  
  239. // Move to the next track if the current one finishes playing
  240. curr_track.addEventListener("ended", nextTrack);
  241.  
  242. }
  243.  
  244. // Reset Values
  245. function resetValues() {
  246. curr_time.textContent = "0:00";
  247. total_duration.textContent = "0:00";
  248. seek_slider.value = 0;
  249. }
  250.  
  251. function playpauseTrack() {
  252. if (!isPlaying) playTrack();
  253. else pauseTrack();
  254. }
  255.  
  256. function playTrack() {
  257. curr_track.play();
  258. isPlaying = true;
  259.  
  260. // Replace icon with the pause icon
  261. playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #FEC5E5"></i>';
  262. }
  263.  
  264. function pauseTrack() {
  265. curr_track.pause();
  266. isPlaying = false;
  267.  
  268. // Replace icon with the play icon
  269. playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #FEC5E5"></i>';
  270. }
  271.  
  272. function nextTrack() {
  273. if (track_index < track_list.length - 1)
  274. track_index += 1;
  275. else track_index = 0;
  276. loadTrack(track_index);
  277. playTrack();
  278. }
  279.  
  280. function prevTrack() {
  281. if (track_index > 0)
  282. track_index -= 1;
  283. else track_index = track_list.length;
  284. loadTrack(track_index);
  285. playTrack();
  286. }
  287.  
  288. function seekTo() {
  289. seekto = curr_track.duration * (seek_slider.value / 100);
  290. curr_track.currentTime = seekto;
  291. }
  292.  
  293. function seekUpdate() {
  294. let seekPosition = 0;
  295.  
  296. // Check if the current track duration is a legible number
  297. if (!isNaN(curr_track.duration)) {
  298. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  299. seek_slider.value = seekPosition;
  300.  
  301. // Calculate the time left and the total duration
  302. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  303. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  304. let durationMinutes = Math.floor(curr_track.duration / 60);
  305. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  306.  
  307. // Adding a zero to the single digit time values
  308. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  309. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  310. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  311. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  312.  
  313. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  314. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  315. }
  316. }
  317.  
  318. // Load the first track in the tracklist
  319. loadTrack(track_index);
  320. </script>
  321. </body>
  322.  
  323. ---ANIMATION---
  324. <style>
  325. #container07, #container08, #container09 {
  326. -webkit-animation: bounce-in-top 1.1s both;
  327. animation: bounce-in-top 1.1s both;
  328. }
  329. /* ----------------------------------------------
  330. * Generated by Animista on 2024-6-3 6:4:24
  331. * Licensed under FreeBSD License.
  332. * See http://animista.net/license for more info.
  333. * w: http://animista.net, t: @cssanimista
  334. * ---------------------------------------------- */
  335.  
  336. /**
  337. * ----------------------------------------
  338. * animation bounce-in-top
  339. * ----------------------------------------
  340. */
  341. @-webkit-keyframes bounce-in-top {
  342. 0% {
  343. -webkit-transform: translateY(-500px);
  344. transform: translateY(-500px);
  345. -webkit-animation-timing-function: ease-in;
  346. animation-timing-function: ease-in;
  347. opacity: 0;
  348. }
  349. 38% {
  350. -webkit-transform: translateY(0);
  351. transform: translateY(0);
  352. -webkit-animation-timing-function: ease-out;
  353. animation-timing-function: ease-out;
  354. opacity: 1;
  355. }
  356. 55% {
  357. -webkit-transform: translateY(-65px);
  358. transform: translateY(-65px);
  359. -webkit-animation-timing-function: ease-in;
  360. animation-timing-function: ease-in;
  361. }
  362. 72% {
  363. -webkit-transform: translateY(0);
  364. transform: translateY(0);
  365. -webkit-animation-timing-function: ease-out;
  366. animation-timing-function: ease-out;
  367. }
  368. 81% {
  369. -webkit-transform: translateY(-28px);
  370. transform: translateY(-28px);
  371. -webkit-animation-timing-function: ease-in;
  372. animation-timing-function: ease-in;
  373. }
  374. 90% {
  375. -webkit-transform: translateY(0);
  376. transform: translateY(0);
  377. -webkit-animation-timing-function: ease-out;
  378. animation-timing-function: ease-out;
  379. }
  380. 95% {
  381. -webkit-transform: translateY(-8px);
  382. transform: translateY(-8px);
  383. -webkit-animation-timing-function: ease-in;
  384. animation-timing-function: ease-in;
  385. }
  386. 100% {
  387. -webkit-transform: translateY(0);
  388. transform: translateY(0);
  389. -webkit-animation-timing-function: ease-out;
  390. animation-timing-function: ease-out;
  391. }
  392. }
  393. @keyframes bounce-in-top {
  394. 0% {
  395. -webkit-transform: translateY(-500px);
  396. transform: translateY(-500px);
  397. -webkit-animation-timing-function: ease-in;
  398. animation-timing-function: ease-in;
  399. opacity: 0;
  400. }
  401. 38% {
  402. -webkit-transform: translateY(0);
  403. transform: translateY(0);
  404. -webkit-animation-timing-function: ease-out;
  405. animation-timing-function: ease-out;
  406. opacity: 1;
  407. }
  408. 55% {
  409. -webkit-transform: translateY(-65px);
  410. transform: translateY(-65px);
  411. -webkit-animation-timing-function: ease-in;
  412. animation-timing-function: ease-in;
  413. }
  414. 72% {
  415. -webkit-transform: translateY(0);
  416. transform: translateY(0);
  417. -webkit-animation-timing-function: ease-out;
  418. animation-timing-function: ease-out;
  419. }
  420. 81% {
  421. -webkit-transform: translateY(-28px);
  422. transform: translateY(-28px);
  423. -webkit-animation-timing-function: ease-in;
  424. animation-timing-function: ease-in;
  425. }
  426. 90% {
  427. -webkit-transform: translateY(0);
  428. transform: translateY(0);
  429. -webkit-animation-timing-function: ease-out;
  430. animation-timing-function: ease-out;
  431. }
  432. 95% {
  433. -webkit-transform: translateY(-8px);
  434. transform: translateY(-8px);
  435. -webkit-animation-timing-function: ease-in;
  436. animation-timing-function: ease-in;
  437. }
  438. 100% {
  439. -webkit-transform: translateY(0);
  440. transform: translateY(0);
  441. -webkit-animation-timing-function: ease-out;
  442. animation-timing-function: ease-out;
  443. }
  444. }
  445. </style>
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!