API tools faq
paste
dollcrds

cr choiphobic pro-standard codes

dollcrds
Apr 10th, 2024 (edited)
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.81 KB | None | 0 0
raw download clone embed print report
  1. ---MAIN---
  2. <style>
  3. #text01, #text07 {
  4. -webkit-animation: pop 1s ease-in-out infinite alternate;
  5. animation: pop 1s ease-in-out infinite alternate;
  6. -moz-animation: pop 1s ease-in-out infinite alternate;
  7. }
  8.  
  9. @keyframes pop {
  10. from {
  11. transform:scale(0.95)
  12. }
  13.  
  14. 50% {
  15. transform:scale(1)
  16. }
  17.  
  18. to {
  19. transform:scale(0.95)
  20. }
  21. }
  22.  
  23. @-webkit-keyframes pop {
  24. from {
  25. -webkit-transform:scale(0.95)
  26.  
  27. }
  28.  
  29. 50% {
  30. -webkit-transform:scale(1)
  31.  
  32. }
  33.  
  34. to {
  35. -webkit-transform:scale(0.95)
  36.  
  37. }
  38. }
  39.  
  40. html {
  41. overflow: scroll;
  42. overflow-x: hidden;
  43. }
  44. ::-webkit-scrollbar {
  45. width: 0; /* remove scrollbar space */
  46. background: transparent; /* to make scrollbar invisible */
  47. }
  48. ::-webkit-scrollbar-thumb {
  49. background: transparent;
  50. }
  51. #text03 {
  52. overflow-y: scroll;
  53. height: 10.5em;
  54. }
  55. @media only screen and (max-width: 600px) {
  56. #text03 {
  57. height: 10.5em;
  58. }
  59. }
  60. </style>
  61.  
  62. ---MARQUEE---
  63. <html>
  64. <head>
  65. </head>
  66. <body>
  67. <marquee behavior="scroll" direction="left">
  68. <img src="https://dl.dropbox.com/scl/fi/eybacuf6mt4uevdl26ugg/1f04d104a583d62f7021c4fc65d55415.jpeg?rlkey=3i70hao6uf5ombj3n0otwz5sk&dl=0.jpeg"75" height="75"/> <img src="https://dl.dropbox.com/scl/fi/hk7qarfuq68eu3vzz7gux/609ed54ceb9a48c4119d022ca311232b.jpeg?rlkey=izynbc0u0v56vmxhm3om5vgyr&dl=0.jpeg"75" height="75"/> <img src="https://dl.dropbox.com/scl/fi/iv5b98kek06babtmr4syt/af163cfe344be46ff4bb190099ce756f.jpeg?rlkey=fgzkbd3rl74agkthjovm4i2hi&dl=0.jpeg"75" height="75"/> <img src="https://dl.dropbox.com/scl/fi/j24aeumfxhyfddxr9578y/e31f54b71190de6d1cb2a2eabd7fcd76.jpeg?rlkey=c4hjsdzmd86sn5xkukzp0pie2&dl=0.jpeg"75" height="75"/> <img src="https://dl.dropbox.com/scl/fi/93wyywbkpj9z7u6yq1zmq/8a80d2c886c77a10c7ea3db34db49ae9.jpeg?rlkey=je6rmbsa98kkenx3h1m97qtec&dl=0.jpeg"75" height="75"/>
  69. </marquee>
  70. </body>
  71. </html>
  72.  
  73. ---MUSIC---
  74. <!-----
  75.  
  76. 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
  77.  
  78. if you need any help feel free to reach out to me at adilene.net!
  79.  
  80. source code: https://github.com/sayantanm19/js-music-player
  81.  
  82. ----->
  83.  
  84. <head>
  85. <script src="https://unpkg.com/phosphor-icons"></script>
  86.  
  87. <style>
  88. @font-face {
  89. font-family: Nintendo-DS-BIOS;
  90. src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
  91. }
  92.  
  93. #musicplayer {
  94. position: relative;
  95. }
  96.  
  97. .songtitle {
  98. font-family: Nintendo-DS-BIOS;
  99. font-size: 1em;
  100. color: #000;
  101. color: white;
  102. -webkit-filter: drop-shadow(0px 0px 1px #000);
  103. }
  104.  
  105. .controls {
  106. font-size: 12px !important;
  107. text-align: center;
  108. width: 100%;
  109. }
  110.  
  111. .controls td {
  112. padding: 0px 5px 0px 5px;
  113. }
  114.  
  115. .seeking {
  116. display: flex;
  117. justify-content: space-evenly;
  118. }
  119.  
  120. .current-time {
  121. padding-right: 5px;
  122. font-family: Nintendo-DS-BIOS;
  123. font-size: 1em;
  124. color: #000;
  125. }
  126.  
  127. .total-duration {
  128. padding-left: 5px;
  129. font-family: Nintendo-DS-BIOS;
  130. font-size: 1em;
  131. color: #000;
  132. }
  133.  
  134. input[type=range] {
  135. -webkit-appearance: none;
  136. width: 100%;
  137. background-color: transparent;
  138. }
  139.  
  140. input[type=range]:focus {
  141. outline: none;
  142. }
  143.  
  144. input[type=range]::-webkit-slider-runnable-track {
  145. width: 100%;
  146. height: 2px;
  147. cursor: help;
  148. animate: 0.2s;
  149. background: #000;
  150. border-radius: 1px;
  151. }
  152.  
  153. input[type=range]::-webkit-slider-thumb {
  154. border: 0px solid #000;
  155. height: 10px;
  156. width: 10px;
  157. border-radius: 10px;
  158. background: #000;
  159. cursor: help;
  160. -webkit-appearance: none;
  161. margin-top: -4px;
  162. }
  163.  
  164. input[type=range]:focus::-webkit-slider-runnable-track {
  165. background: #000;
  166. }
  167.  
  168. input[type=range]::-moz-range-track {
  169. width: 100%;
  170. height: 1px;
  171. cursor: help;
  172. animate: 0.2s;
  173. background: #000;
  174. border-radius: 99px;
  175. }
  176.  
  177. input[type=range]::-moz-range-thumb {
  178. border: 0px solid #000;
  179. height: 10px;
  180. width: 10px;
  181. border-radius: 10px;
  182. background: #000;
  183. cursor: help;
  184. }
  185.  
  186. input[type=range]::-ms-track {
  187. width: 100%;
  188. height: 2px;
  189. cursor: help;
  190. animate: 0.2s;
  191. background: transparent;
  192. border-color: transparent;
  193. color: transparent;
  194. }
  195.  
  196. input[type=range]::-ms-fill-lower {
  197. background: #000;
  198. border-radius: 2px;
  199. }
  200.  
  201. input[type=range]::-ms-fill-upper {
  202. background: #000;
  203. border-radius: 2px;
  204. }
  205.  
  206. input[type=range]::-ms-thumb {
  207. margin-top: 1px;
  208. border: 0px solid #000;
  209. height: 10px;
  210. width: 10px;
  211. border-radius: 10px;
  212. background: #000;
  213. cursor: help;
  214. }
  215.  
  216. input[type=range]:focus::-ms-fill-lower {
  217. background: #000;
  218. }
  219.  
  220. input[type=range]:focus::-ms-fill-upper {
  221. background: #000;
  222. }
  223. </style>
  224. </head>
  225.  
  226. <body>
  227. <div id="musicplayer">
  228. <div>
  229.  
  230. <div class="songtitle"></div>
  231.  
  232. <table class="controls">
  233. <tr>
  234. <td>
  235. <div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #000"></i></div>
  236. </td>
  237. <td>
  238. <div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #000"></i></div>
  239. </td>
  240. <td>
  241. <div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #000"></i></div>
  242. </td>
  243. </tr>
  244. </table>
  245.  
  246. <div class="seeking">
  247. <div class="current-time">00:00</div>
  248.  
  249. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  250.  
  251. <div class="total-duration">0:00</div>
  252. </div>
  253.  
  254. <audio id="music" src=""></audio>
  255. </div>
  256. </div>
  257.  
  258. <script>
  259. let track_name = document.querySelector(".songtitle");
  260.  
  261. let playpause_btn = document.querySelector(".playpause-track");
  262. let next_btn = document.querySelector(".next-track");
  263. let prev_btn = document.querySelector(".prev-track");
  264.  
  265. let seek_slider = document.querySelector(".seek_slider");
  266. let curr_time = document.querySelector(".current-time");
  267. let total_duration = document.querySelector(".total-duration");
  268.  
  269. let track_index = 0;
  270. let isPlaying = false;
  271. let updateTimer;
  272.  
  273. // Create new audio element
  274. let curr_track = document.getElementById("music");
  275.  
  276. //
  277. // DEFINE YOUR SONGS HERE!!!!!
  278. // MORE THAN FOUR SONGS CAN BE ADDED!!
  279. // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  280. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  281. let track_list = [
  282. {
  283. name:"SMARTPHONE by YENA",
  284. path:"https://dl.dropbox.com/scl/fi/7f27upbvczxjah7gqospf/02-SMARTPHONE.m4a?rlkey=oo50gl8zdzgkqt7co12zkedu4&dl=0.mp3"
  285. },
  286. {
  287. name:"WithOrWithOutYou by YENA",
  288. path:"https://dl.dropbox.com/scl/fi/otydr1c3kjwiaa9ra3qqt/03-WithOrWithOut.m4a?rlkey=kwld60fozwdae1zaq66cajoxp&dl=0.mp3"
  289. },
  290. {
  291. name:"Lemon-Aid by YENA",
  292. path:"https://dl.dropbox.com/scl/fi/23iz8g83krys9lu7xr7s9/04-Lemon-Aid.m4a?rlkey=js3cvl4fvkl8ez427kwlspmzv&dl=0.mp3"
  293. },
  294. ];
  295.  
  296. function loadTrack(track_index) {
  297. clearInterval(updateTimer);
  298. resetValues();
  299.  
  300. // Load a new track
  301. curr_track.src = track_list[track_index].path;
  302. curr_track.load();
  303.  
  304. // Set an interval of 1000 milliseconds for updating the seek slider
  305. updateTimer = setInterval(seekUpdate, 1000);
  306.  
  307. // Move to the next track if the current one finishes playing
  308. curr_track.addEventListener("ended", nextTrack);
  309.  
  310. }
  311.  
  312. // Reset Values
  313. function resetValues() {
  314. curr_time.textContent = "0:00";
  315. total_duration.textContent = "0:00";
  316. seek_slider.value = 0;
  317. }
  318.  
  319. function playpauseTrack() {
  320. if (!isPlaying) playTrack();
  321. else pauseTrack();
  322. }
  323.  
  324. function playTrack() {
  325. curr_track.play();
  326. isPlaying = true;
  327.  
  328. // Replace icon with the pause icon
  329. playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #000"></i>';
  330. }
  331.  
  332. function pauseTrack() {
  333. curr_track.pause();
  334. isPlaying = false;
  335.  
  336. // Replace icon with the play icon
  337. playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #000"></i>';
  338. }
  339.  
  340. function nextTrack() {
  341. if (track_index < track_list.length - 1)
  342. track_index += 1;
  343. else track_index = 0;
  344. loadTrack(track_index);
  345. playTrack();
  346. }
  347.  
  348. function prevTrack() {
  349. if (track_index > 0)
  350. track_index -= 1;
  351. else track_index = track_list.length;
  352. loadTrack(track_index);
  353. playTrack();
  354. }
  355.  
  356. function seekTo() {
  357. seekto = curr_track.duration * (seek_slider.value / 100);
  358. curr_track.currentTime = seekto;
  359. }
  360.  
  361. function seekUpdate() {
  362. let seekPosition = 0;
  363.  
  364. // Check if the current track duration is a legible number
  365. if (!isNaN(curr_track.duration)) {
  366. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  367. seek_slider.value = seekPosition;
  368.  
  369. // Calculate the time left and the total duration
  370. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  371. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  372. let durationMinutes = Math.floor(curr_track.duration / 60);
  373. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  374.  
  375. // Adding a zero to the single digit time values
  376. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  377. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  378. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  379. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  380.  
  381. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  382. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  383. }
  384. }
  385.  
  386. // Load the first track in the tracklist
  387. loadTrack(track_index);
  388. </script>
  389. </body>
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!