Guest User

adilene.net music player (lite)

a guest
Dec 28th, 2024
549
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.09 KB | None | 0 0
  1. <style>
  2. #musicplayer{
  3. font-family:'Arial'; /* default font */
  4. background:white; /* background color of player */
  5. border:4px solid #4cd4de; /* border around player */
  6. width:200px; /* width of the player - make it 100% if you want it to fill your container */
  7. padding:10px;
  8. text-align:center;
  9. display:flex;
  10. flex-direction:column;
  11. gap:10px;
  12. }
  13.  
  14. .songtitle, .track-info, .now-playing{
  15. padding:5px;
  16. }
  17.  
  18. .controls{
  19. display:flex;
  20. flex-direction:column;
  21. gap:10px;
  22. }
  23.  
  24. .buttons{
  25. display:flex;
  26. justify-content:center;
  27. font-size:17px !important; /* size of controls */
  28. width:100%;
  29. }
  30.  
  31. .buttons div{
  32. width:33.3%;
  33. }
  34.  
  35. .playpause-track, .prev-track, .next-track{
  36. color:#e74492; /* color of buttons */
  37. font-size:35px !important; /* size of buttons */
  38. }
  39.  
  40. .volume-icon{
  41. font-size:22px !important; /* size of volume icon */
  42. }
  43.  
  44. .seeking, .volume{
  45. display:flex;
  46. flex-direction:row;
  47. align-items:center;
  48. gap:5px;
  49. }
  50.  
  51. .now-playing, .track-info{
  52. background-color:#c9eff2; /* background color of top two boxes */
  53. }
  54.  
  55. .now-playing{
  56. font-weight:bold;
  57. }
  58.  
  59. input[type=range]{
  60. -webkit-appearance:none; /* removes default appearance of the tracks */
  61. width:100%;
  62. }
  63.  
  64. input[type=range]:focus{
  65. outline:none; /* removes outline around tracks when focusing */
  66. }
  67.  
  68. input[type=range]::-webkit-slider-runnable-track{
  69. width:100%;
  70. height:4px; /* thickness of seeking track */
  71. background:#e74492; /* color of seeking track */
  72. }
  73.  
  74. input[type=range]::-webkit-slider-thumb{
  75. height:10px; /* height of seeking square */
  76. width:10px; /* width of seeking square */
  77. border-radius:0px; /* change to 5px if you want a circle seeker */
  78. background:#e74492; /* color of seeker square */
  79. -webkit-appearance:none;
  80. margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
  81. }
  82.  
  83. input[type=range]::-moz-range-track{
  84. width:100%;
  85. height:4px; /* thickness of seeking track */
  86. background:#e74492; /* color of seeking track */
  87. }
  88.  
  89. input[type=range]::-moz-range-thumb{
  90. height:10px; /* height of seeking square */
  91. width:10px; /* width of seeking square */
  92. border-radius:0px; /* change to 5px if you want a circle seeker */
  93. background:#e74492; /* color of seeker square */
  94. border:none; /* removes weird border around seeker square in firefox */
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <div id="musicplayer">
  100. <div class="now-playing">Playing 1 of 2</div>
  101.  
  102. <div class="track-info">
  103. <div class="track-name">Song Name</div>
  104. <div class="track-artist"></div>
  105. </div>
  106.  
  107. <div class="controls">
  108. <div class="seeking">
  109. <div class="current-time">00:00</div>
  110.  
  111. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  112.  
  113. <div class="total-duration">0:00</div>
  114. </div>
  115.  
  116. <div class="buttons">
  117. <div class="prev-track" onclick="prevTrack()">&#171;</div>
  118.  
  119. <div class="playpause-track" onclick="playpauseTrack()">&#9654;</div>
  120.  
  121. <div class="next-track" onclick="nextTrack()">&#187;</div>
  122. </div>
  123.  
  124. <div class="volume">
  125. <div class="volume-icon">&#128362;</div>
  126. <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()"> <!-- the default volume value is 25, change this if you want it to be higher or lower (i wouldn't recommend it bc it gets really loud) -->
  127. </div>
  128. </div>
  129.  
  130. <audio id="music" src=""></audio>
  131. </div>
  132.  
  133. <script>
  134. // initiate variables
  135. let now_playing = document.querySelector(".now-playing");
  136. let track_name = document.querySelector(".track-name");
  137. let track_artist = document.querySelector(".track-artist");
  138.  
  139.  
  140. let playpause_btn = document.querySelector(".playpause-track");
  141. let next_btn = document.querySelector(".next-track");
  142. let prev_btn = document.querySelector(".prev-track");
  143.  
  144. let seek_slider = document.querySelector(".seek_slider");
  145. let volume_slider = document.querySelector(".volume_slider");
  146. let curr_time = document.querySelector(".current-time");
  147. let total_duration = document.querySelector(".total-duration");
  148.  
  149. let track_index = 0;
  150. let isPlaying = false;
  151. let updateTimer;
  152.  
  153. // create new audio element
  154. let curr_track = document.getElementById("music");
  155.  
  156. //
  157. // DEFINE YOUR SONGS HERE!!!!!
  158. // MORE THAN FOUR SONGS CAN BE ADDED!!
  159. // JUST ADD ANOTHER BRACKET WITH NAME ARTIST AND PATH
  160. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES IF YOU DON'T HAVE NEOCITIES SUPPORTER
  161. let track_list = [
  162. {
  163. name:"Lagtrain",
  164. artist:"inabakumori",
  165. path:"https://files.catbox.moe/9ywkki.mp3"
  166. },
  167. {
  168. name:"Kimi ni Kaikisen",
  169. artist:"inabakumori",
  170. path:"https://files.catbox.moe/1pxdnw.mp3"
  171. },
  172. {
  173. name:"God-ish",
  174. artist:"Pinocchio-P",
  175. path:"https://files.catbox.moe/xv3vdj.mp3"
  176. },
  177. {
  178. name: "Her Boyfriend, Jude",
  179. artist:"Syudou",
  180. path: "https://files.catbox.moe/49iuxl.mp3",
  181. },
  182. ];
  183. //
  184. //
  185. //
  186. //
  187. //
  188.  
  189. function loadTrack(track_index){
  190. clearInterval(updateTimer);
  191. resetValues();
  192.  
  193. // load a new track
  194. curr_track.src = track_list[track_index].path;
  195. curr_track.load();
  196.  
  197. // update details of the track
  198. track_name.textContent = track_list[track_index].name;
  199. track_artist.textContent = track_list[track_index].artist;
  200. now_playing.textContent = "Playing " + (track_index + 1) + " of " + track_list.length;
  201.  
  202. // set an interval of 1000 milliseconds for updating the seek slider
  203. updateTimer = setInterval(seekUpdate, 1000);
  204.  
  205. // move to the next track if the current one finishes playing
  206. curr_track.addEventListener("ended", nextTrack);
  207.  
  208. }
  209.  
  210. // reset values
  211. function resetValues(){
  212. curr_time.textContent = "0:00";
  213. total_duration.textContent = "0:00";
  214. seek_slider.value = 0;
  215. }
  216.  
  217. // load the first track in the tracklist
  218. loadTrack(track_index);
  219.  
  220. // checks if song is playing
  221. function playpauseTrack(){
  222. if (!isPlaying) playTrack();
  223. else pauseTrack();
  224. }
  225.  
  226. // plays track when play button is pressed
  227. function playTrack(){
  228. curr_track.play();
  229. isPlaying = true;
  230.  
  231. // replace icon with the pause icon
  232. playpause_btn.innerHTML = '&#9646;';
  233. }
  234.  
  235. // pauses track when pause button is pressed
  236. function pauseTrack(){
  237. curr_track.pause();
  238. isPlaying = false;
  239.  
  240. playpause_btn.innerHTML = '&#9654;';
  241. }
  242.  
  243. // moves to the next track
  244. function nextTrack(){
  245. if (track_index < track_list.length - 1)
  246. track_index += 1;
  247. else track_index = 0;
  248. loadTrack(track_index);
  249. playTrack();
  250. }
  251.  
  252. // moves to the previous track
  253. function prevTrack(){
  254. if (track_index > 0)
  255. track_index -= 1;
  256. else track_index = track_list.length;
  257. loadTrack(track_index);
  258. playTrack();
  259. }
  260.  
  261. // seeker slider
  262. function seekTo(){
  263. seekto = curr_track.duration * (seek_slider.value / 100);
  264. curr_track.currentTime = seekto;
  265. }
  266.  
  267. // volume slider
  268. function setVolume(){
  269. curr_track.volume = volume_slider.value / 100;
  270. }
  271.  
  272. setVolume();
  273.  
  274. function seekUpdate(){
  275. let seekPosition = 0;
  276.  
  277. // check if the current track duration is a legible number
  278. if (!isNaN(curr_track.duration)){
  279. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  280. seek_slider.value = seekPosition;
  281.  
  282. // calculate the time left and the total duration
  283. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  284. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  285. let durationMinutes = Math.floor(curr_track.duration / 60);
  286. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  287.  
  288. // adding a zero to the single digit time values
  289. if (currentSeconds < 10){ currentSeconds = "0" + currentSeconds; }
  290. if (durationSeconds < 10){ durationSeconds = "0" + durationSeconds; }
  291. if (currentMinutes < 10){ currentMinutes = currentMinutes; }
  292. if (durationMinutes < 10){ durationMinutes = durationMinutes; }
  293.  
  294. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  295. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  296. }
  297. }
  298. </script>
Add Comment
Please, Sign In to add comment