API tools faq
paste
Advertisement
izuemis

king ju mp codes

izuemis
Aug 19th, 2022
462
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.16 KB | None | 0 0
raw download clone embed print report
  1. CODES EMBED
  2.  
  3. <style>
  4.  
  5. #container01 > .wrapper {
  6. width: 10em;
  7. height: 12em;
  8. border-radius: .5em;
  9. }
  10.  
  11. #container02 > .wrapper {
  12. width: 14em;
  13. border-radius: .5em .5em 0em 0em;
  14. }
  15.  
  16. #container03 > .wrapper {
  17. width: 14em;
  18. height: 13em;
  19. border-radius: 0em 0em .5em .5em;
  20. overflow: auto;
  21. }
  22.  
  23. #container04 > .wrapper {
  24. width: 10em;
  25. }
  26.  
  27. #icons01 li a {
  28. border: 1px solid #a772af;
  29. }
  30.  
  31. #text03 mark, #text04 mark, #text05 mark, #text06 mark {
  32. background: white;
  33. padding-left: 5px;
  34. padding-right: 7px;
  35. border-radius: 0px 10px 10px 0px;
  36. margin-left: -.8em;
  37. font-size: 1em;
  38. border: 1px solid #5E5E5E;
  39. border-left: none;
  40. }
  41.  
  42. #text03, #text04, #text05, #text06 {
  43. background: #b3bede;
  44. border-radius: 10px;
  45. padding: 10px;
  46. border: 1px solid #5E5E5E;
  47. color: white;
  48. }
  49.  
  50. ::-webkit-scrollbar {
  51. width: 8px;
  52. }
  53.  
  54. ::-webkit-scrollbar-track {
  55. background-color: #e4e4e4;
  56. -webkit-border-radius: 10px;
  57. border-radius: 10px;
  58. border: 1px solid #ccc;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb {
  62. -webkit-border-radius: 10px;
  63. border-radius: 10px;
  64. background: #e4e4e4;
  65. border: 1px solid #aaa;
  66. }
  67.  
  68. ::selection {
  69. background: #a772af;
  70. color: #e6d6e7;
  71. }
  72.  
  73. @media only screen and (max-width: 600px) {
  74.  
  75. #container02 > .wrapper {
  76. width: 12em;
  77. }
  78. #container03 > .wrapper {
  79. width: 12em;
  80. }
  81. }
  82.  
  83. </style>
  84.  
  85. _________________________________________
  86.  
  87. POSITIONING CODES
  88.  
  89. <style>
  90.  
  91. #container02 {
  92. position: absolute;
  93. left: 11em;
  94. bottom: 14em;
  95. }
  96.  
  97. #container03 {
  98. position: absolute;
  99. left: 11em;
  100. bottom: 1em;
  101. }
  102.  
  103. </style>
  104. _________________________________________
  105.  
  106. MUSIC PLAYER
  107.  
  108. <head>
  109. <script src="https://unpkg.com/phosphor-icons"></script>
  110.  
  111. <style>
  112. #musicplayer {
  113. }
  114.  
  115. .songtitle {
  116. font-family: Nintendo-DS-BIOS;
  117. font-size: 1em;
  118. color: white;
  119. -webkit-filter: drop-shadow(0px 0px 1px #ca99cb);
  120. }
  121.  
  122. .controls {
  123. font-size: 18px !important;
  124. text-align: center;
  125. width: 100%;
  126. }
  127.  
  128. .controls td {
  129. padding: 0px 5px 0px 5px;
  130. }
  131.  
  132. .seeking {
  133. display: flex;
  134. justify-content: space-evenly;
  135. }
  136.  
  137. .current-time {
  138. padding-right: 5px;
  139. font-family: Nintendo-DS-BIOS;
  140. font-size: .75em;
  141. color: #000;
  142. }
  143.  
  144. .total-duration {
  145. padding-left: 5px;
  146. font-family: Nintendo-DS-BIOS;
  147. font-size: .75em;
  148. color: #000;
  149. }
  150.  
  151. input[type=range] {
  152. -webkit-appearance: none;
  153. width: 100%;
  154. background-color: transparent;
  155. }
  156.  
  157. input[type=range]:focus {
  158. outline: none;
  159. }
  160.  
  161. input[type=range]::-webkit-slider-runnable-track {
  162. width: 100%;
  163. height: 2px;
  164. cursor: help;
  165. animate: 0.2s;
  166. background: #ca99cb;
  167. border-radius: 1px;
  168. }
  169.  
  170. input[type=range]::-webkit-slider-thumb {
  171. border: 0px solid #ca99cb;
  172. height: 10px;
  173. width: 10px;
  174. border-radius: 10px;
  175. background: #ca99cb: ;
  176. cursor: help;
  177. -webkit-appearance: none;
  178. margin-top: -4px;
  179. }
  180.  
  181. input[type=range]:focus::-webkit-slider-runnable-track {
  182. background: #ca99cb;
  183. }
  184.  
  185. input[type=range]::-moz-range-track {
  186. width: 100%;
  187. height: 2px;
  188. cursor: help;
  189. animate: 0.2s;
  190. background: #ca99cb;
  191. border-radius: 1px;
  192. }
  193.  
  194. input[type=range]::-moz-range-thumb {
  195. border: 0px solid #ca99cb;
  196. height: 10px;
  197. width: 10px;
  198. border-radius: 10px;
  199. background: #ca99cb;
  200. cursor: help;
  201. }
  202.  
  203. input[type=range]::-ms-track {
  204. width: 100%;
  205. height: 2px;
  206. cursor: help;
  207. animate: 0.2s;
  208. background: transparent;
  209. border-color: transparent;
  210. color: transparent;
  211. }
  212.  
  213. input[type=range]::-ms-fill-lower {
  214. background: #ca99cb;
  215. border-radius: 2px;
  216. }
  217.  
  218. input[type=range]::-ms-fill-upper {
  219. background: #ca99cb;
  220. border-radius: 2px;
  221. }
  222.  
  223. input[type=range]::-ms-thumb {
  224. margin-top: 1px;
  225. border: 0px solid #ca99cb;
  226. height: 10px;
  227. width: 10px;
  228. border-radius: 10px;
  229. background: #ca99cb;
  230. cursor: help;
  231. }
  232.  
  233. input[type=range]:focus::-ms-fill-lower {
  234. background: #ca99cb;
  235. }
  236.  
  237. input[type=range]:focus::-ms-fill-upper {
  238. background: #ca99cb;
  239. }
  240. </style>
  241. </head>
  242.  
  243. <body>
  244. <div id="musicplayer">
  245. <div>
  246.  
  247. <div class="songtitle"></div>
  248.  
  249. <table class="controls">
  250. <tr>
  251. <td>
  252. <div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #ca99cb"></i></div>
  253. </td>
  254. <td>
  255. <div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #ca99cb"></i></div>
  256. </td>
  257. <td>
  258. <div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #ca99cb"></i></div>
  259. </td>
  260. </tr>
  261. </table>
  262.  
  263. <div class="seeking">
  264. <div class="current-time">00:00</div>
  265.  
  266. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  267.  
  268. <div class="total-duration">0:00</div>
  269. </div>
  270.  
  271. <audio id="music" src=""></audio>
  272. </div>
  273. </div>
  274.  
  275. <script>
  276. let track_name = document.querySelector(".songtitle");
  277.  
  278. let playpause_btn = document.querySelector(".playpause-track");
  279. let next_btn = document.querySelector(".next-track");
  280. let prev_btn = document.querySelector(".prev-track");
  281.  
  282. let seek_slider = document.querySelector(".seek_slider");
  283. let curr_time = document.querySelector(".current-time");
  284. let total_duration = document.querySelector(".total-duration");
  285.  
  286. let track_index = 0;
  287. let isPlaying = false;
  288. let updateTimer;
  289.  
  290. // Create new audio element
  291. let curr_track = document.getElementById("music");
  292.  
  293. // Define the tracks that have to be played
  294. let track_list = [
  295. {
  296. name:"cry baby",
  297. path:"https://cdn.discordapp.com/attachments/849646455948967958/980459406368079872/Cry_Babyver._RAISE_A_SUILEN.mp3"
  298. },
  299. {
  300. name:"new beginning",
  301. path:"https://cdn.discordapp.com/attachments/849646455948967958/1004014122985336882/Ado__from_ONE_PIECE_FILM_RED.mp3"
  302. },
  303. {
  304. name:"finder girl",
  305. path:"https://cdn.discordapp.com/attachments/918443780150009886/951017710354063370/ESFinder_Girl.mp3"
  306. },
  307. {
  308. name: "king",
  309. path: "https://cdn.discordapp.com/attachments/918443780150009886/988104727923413033/KING_.mp3",
  310. },
  311. ];
  312.  
  313. function loadTrack(track_index) {
  314. clearInterval(updateTimer);
  315. resetValues();
  316.  
  317. // Load a new track
  318. curr_track.src = track_list[track_index].path;
  319. curr_track.load();
  320.  
  321. // Set an interval of 1000 milliseconds for updating the seek slider
  322. updateTimer = setInterval(seekUpdate, 1000);
  323.  
  324. // Move to the next track if the current one finishes playing
  325. curr_track.addEventListener("ended", nextTrack);
  326.  
  327. }
  328.  
  329. // Reset Values
  330. function resetValues() {
  331. curr_time.textContent = "0:00";
  332. total_duration.textContent = "0:00";
  333. seek_slider.value = 0;
  334. }
  335.  
  336. function playpauseTrack() {
  337. if (!isPlaying) playTrack();
  338. else pauseTrack();
  339. }
  340.  
  341. function playTrack() {
  342. curr_track.play();
  343. isPlaying = true;
  344.  
  345. // Replace icon with the pause icon
  346. playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #CCDCEC"></i>';
  347. }
  348.  
  349. function pauseTrack() {
  350. curr_track.pause();
  351. isPlaying = false;
  352.  
  353. // Replace icon with the play icon
  354. playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #CCDCEC"></i>';
  355. }
  356.  
  357. function nextTrack() {
  358. if (track_index < track_list.length - 1)
  359. track_index += 1;
  360. else track_index = 0;
  361. loadTrack(track_index);
  362. playTrack();
  363. }
  364.  
  365. function prevTrack() {
  366. if (track_index > 0)
  367. track_index -= 1;
  368. else track_index = track_list.length;
  369. loadTrack(track_index);
  370. playTrack();
  371. }
  372.  
  373. function seekTo() {
  374. seekto = curr_track.duration * (seek_slider.value / 100);
  375. curr_track.currentTime = seekto;
  376. }
  377.  
  378. function seekUpdate() {
  379. let seekPosition = 0;
  380.  
  381. // Check if the current track duration is a legible number
  382. if (!isNaN(curr_track.duration)) {
  383. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  384. seek_slider.value = seekPosition;
  385.  
  386. // Calculate the time left and the total duration
  387. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  388. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  389. let durationMinutes = Math.floor(curr_track.duration / 60);
  390. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  391.  
  392. // Adding a zero to the single digit time values
  393. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  394. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  395. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  396. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  397.  
  398. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  399. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  400. }
  401. }
  402.  
  403. // Load the first track in the tracklist
  404. loadTrack(track_index);
  405. </script>
  406. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!