API tools faq
paste
Advertisement
izuemis

phone music player

izuemis
Sep 2nd, 2022
323
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.59 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <script src="https://unpkg.com/phosphor-icons"></script>
  3.  
  4. <style>
  5. #musicplayer {
  6. }
  7.  
  8. .songtitle {
  9. font-family: Nintendo-DS-BIOS;
  10. font-size: 1em;
  11. color: white;
  12. -webkit-filter: drop-shadow(0px 0px 1px #bc5494);
  13. }
  14.  
  15. .controls {
  16. font-size: 18px !important;
  17. text-align: center;
  18. width: 100%;
  19. }
  20.  
  21. .controls td {
  22. padding: 0px 5px 0px 5px;
  23. }
  24.  
  25. .seeking {
  26. display: flex;
  27. justify-content: space-evenly;
  28. }
  29.  
  30. .current-time {
  31. padding-right: 5px;
  32. font-family: Nintendo-DS-BIOS;
  33. font-size: .75em;
  34. color: #000;
  35. }
  36.  
  37. .total-duration {
  38. padding-left: 5px;
  39. font-family: Nintendo-DS-BIOS;
  40. font-size: .75em;
  41. color: #000;
  42. }
  43.  
  44. input[type=range] {
  45. -webkit-appearance: none;
  46. width: 100%;
  47. background-color: transparent;
  48. }
  49.  
  50. input[type=range]:focus {
  51. outline: none;
  52. }
  53.  
  54. input[type=range]::-webkit-slider-runnable-track {
  55. width: 100%;
  56. height: 2px;
  57. cursor: help;
  58. animate: 0.2s;
  59. background: #bc5494;
  60. border-radius: 1px;
  61. }
  62.  
  63. input[type=range]::-webkit-slider-thumb {
  64. border: 0px solid #bc5494;
  65. height: 10px;
  66. width: 10px;
  67. border-radius: 10px;
  68. background: #bc5494;
  69. cursor: help;
  70. -webkit-appearance: none;
  71. margin-top: -4px;
  72. }
  73.  
  74. input[type=range]:focus::-webkit-slider-runnable-track {
  75. background: #bc5494;
  76. }
  77.  
  78. input[type=range]::-moz-range-track {
  79. width: 100%;
  80. height: 2px;
  81. cursor: help;
  82. animate: 0.2s;
  83. background: #bc5494;
  84. border-radius: 1px;
  85. }
  86.  
  87. input[type=range]::-moz-range-thumb {
  88. border: 0px solid #bc5494;
  89. height: 10px;
  90. width: 10px;
  91. border-radius: 10px;
  92. background: #bc5494;
  93. cursor: help;
  94. }
  95.  
  96. input[type=range]::-ms-track {
  97. width: 100%;
  98. height: 2px;
  99. cursor: help;
  100. animate: 0.2s;
  101. background: transparent;
  102. border-color: transparent;
  103. color: transparent;
  104. }
  105.  
  106. input[type=range]::-ms-fill-lower {
  107. background: #bc5494;
  108. border-radius: 2px;
  109. }
  110.  
  111. input[type=range]::-ms-fill-upper {
  112. background: #bc5494;
  113. border-radius: 2px;
  114. }
  115.  
  116. input[type=range]::-ms-thumb {
  117. margin-top: 1px;
  118. border: 0px solid #bc5494;
  119. height: 10px;
  120. width: 10px;
  121. border-radius: 10px;
  122. background: #bc5494;
  123. cursor: help;
  124. }
  125.  
  126. input[type=range]:focus::-ms-fill-lower {
  127. background: #bc5494;
  128. }
  129.  
  130. input[type=range]:focus::-ms-fill-upper {
  131. background: #bc5494;
  132. }
  133. </style>
  134. </head>
  135.  
  136. <body>
  137. <div id="musicplayer">
  138. <div>
  139.  
  140. <div class="songtitle"></div>
  141.  
  142. <table class="controls">
  143. <tr>
  144. <td>
  145. <div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #bc5494"></i></div>
  146. </td>
  147. <td>
  148. <div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #bc5494"></i></div>
  149. </td>
  150. <td>
  151. <div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #bc5494"></i></div>
  152. </td>
  153. </tr>
  154. </table>
  155.  
  156. <div class="seeking">
  157. <div class="current-time">00:00</div>
  158.  
  159. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  160.  
  161. <div class="total-duration">0:00</div>
  162. </div>
  163.  
  164. <audio id="music" src=""></audio>
  165. </div>
  166. </div>
  167.  
  168. <script>
  169. let track_name = document.querySelector(".songtitle");
  170.  
  171. let playpause_btn = document.querySelector(".playpause-track");
  172. let next_btn = document.querySelector(".next-track");
  173. let prev_btn = document.querySelector(".prev-track");
  174.  
  175. let seek_slider = document.querySelector(".seek_slider");
  176. let curr_time = document.querySelector(".current-time");
  177. let total_duration = document.querySelector(".total-duration");
  178.  
  179. let track_index = 0;
  180. let isPlaying = false;
  181. let updateTimer;
  182.  
  183. // Create new audio element
  184. let curr_track = document.getElementById("music");
  185.  
  186. // Define the tracks that have to be played
  187. let track_list = [
  188. {
  189. name:"cry baby",
  190. path:"https://cdn.discordapp.com/attachments/849646455948967958/980459406368079872/Cry_Babyver._RAISE_A_SUILEN.mp3"
  191. },
  192. {
  193. name:"new beginning",
  194. path:"https://cdn.discordapp.com/attachments/849646455948967958/1004014122985336882/Ado__from_ONE_PIECE_FILM_RED.mp3"
  195. },
  196. {
  197. name:"finder girl",
  198. path:"https://cdn.discordapp.com/attachments/918443780150009886/951017710354063370/ESFinder_Girl.mp3"
  199. },
  200. {
  201. name: "king",
  202. path: "https://cdn.discordapp.com/attachments/918443780150009886/988104727923413033/KING_.mp3",
  203. },
  204. ];
  205.  
  206. function loadTrack(track_index) {
  207. clearInterval(updateTimer);
  208. resetValues();
  209.  
  210. // Load a new track
  211. curr_track.src = track_list[track_index].path;
  212. curr_track.load();
  213.  
  214. // Set an interval of 1000 milliseconds for updating the seek slider
  215. updateTimer = setInterval(seekUpdate, 1000);
  216.  
  217. // Move to the next track if the current one finishes playing
  218. curr_track.addEventListener("ended", nextTrack);
  219.  
  220. }
  221.  
  222. // Reset Values
  223. function resetValues() {
  224. curr_time.textContent = "0:00";
  225. total_duration.textContent = "0:00";
  226. seek_slider.value = 0;
  227. }
  228.  
  229. function playpauseTrack() {
  230. if (!isPlaying) playTrack();
  231. else pauseTrack();
  232. }
  233.  
  234. function playTrack() {
  235. curr_track.play();
  236. isPlaying = true;
  237.  
  238. // Replace icon with the pause icon
  239. playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #CCDCEC"></i>';
  240. }
  241.  
  242. function pauseTrack() {
  243. curr_track.pause();
  244. isPlaying = false;
  245.  
  246. // Replace icon with the play icon
  247. playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #CCDCEC"></i>';
  248. }
  249.  
  250. function nextTrack() {
  251. if (track_index < track_list.length - 1)
  252. track_index += 1;
  253. else track_index = 0;
  254. loadTrack(track_index);
  255. playTrack();
  256. }
  257.  
  258. function prevTrack() {
  259. if (track_index > 0)
  260. track_index -= 1;
  261. else track_index = track_list.length;
  262. loadTrack(track_index);
  263. playTrack();
  264. }
  265.  
  266. function seekTo() {
  267. seekto = curr_track.duration * (seek_slider.value / 100);
  268. curr_track.currentTime = seekto;
  269. }
  270.  
  271. function seekUpdate() {
  272. let seekPosition = 0;
  273.  
  274. // Check if the current track duration is a legible number
  275. if (!isNaN(curr_track.duration)) {
  276. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  277. seek_slider.value = seekPosition;
  278.  
  279. // Calculate the time left and the total duration
  280. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  281. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  282. let durationMinutes = Math.floor(curr_track.duration / 60);
  283. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  284.  
  285. // Adding a zero to the single digit time values
  286. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  287. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  288. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  289. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  290.  
  291. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  292. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  293. }
  294. }
  295.  
  296. // Load the first track in the tracklist
  297. loadTrack(track_index);
  298. </script>
  299. </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!