loveberry

win98 music player

Jun 29th, 2023 (edited)
1,746
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.07 KB | None | 1 0
  1. <head>
  2. <!-----
  3.  
  4. ,
  5. ,-. _,---._ __ / \
  6. / ) .-' `./ / \
  7. ( ( ,' `/ /|
  8. \ `-" \'\ / |
  9. `. , \ \ / |
  10. /`. ,'-`----Y |
  11. ( ; | '
  12. | ,-. ,-' | /
  13. | | ( | | /
  14. ) | \ `.___________|/
  15. `--' `--'
  16.  
  17. * original multiple song music player by adilene @ adilene.net. [https://pastebin.com/PiDgrv3J]
  18. * edited using 98 css [https://jdan.github.io/98.css/]
  19. * stitched together by june @ loveberry.neocities.org / layercake.neocities.org
  20. * source code: https://github.com/sayantanm19/js-music-player
  21. ----->
  22.  
  23.  
  24. <!-- add fontawesome stylesheet to the head!! -->
  25. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script> <!-- add fontawesome stylesheet to the head!! -->
  26.  
  27. <!-- stuff you can probably edit without breaking the styling lol -->
  28. <style>
  29. .title-bar {
  30. background:linear-gradient(90deg, purple, orchid, pink);
  31. }
  32.  
  33. .player {
  34. width:fit-content;
  35. border: black solid 1px;
  36. border-width: 1px 0px 0px 1px;
  37. margin-left:auto;
  38. margin-right:auto;
  39. }
  40.  
  41. i.fas:hover {
  42. cursor:help;
  43. }
  44.  
  45. i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  46. color:#000; /* color of controls */
  47. }
  48. </style>
  49.  
  50. <!-- below is styling to get windows 98 effect. from 98.css [https://jdan.github.io/98.css/] -->
  51. <style>
  52. input[type="range"] {
  53. -webkit-appearance: none;
  54. appearance: none;
  55. width: 100%;
  56. background: transparent;
  57. }
  58.  
  59. input[type="range"]:focus {
  60. outline: none;
  61. }
  62.  
  63. input[type="range"]::-webkit-slider-thumb {
  64. -webkit-appearance: none;
  65. height: 21px;
  66. width: 11px;
  67. background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  68. transform: translateY(-8px);
  69. box-shadow: none;
  70. border: none;
  71. }
  72.  
  73. input[type="range"].has-box-indicator::-webkit-slider-thumb {
  74. background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  75. transform: translateY(-10px);
  76. }
  77.  
  78. input[type="range"]::-moz-range-thumb {
  79. height: 21px;
  80. width: 11px;
  81. border: 0;
  82. border-radius: 0;
  83. background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  84. transform: translateY(2px);
  85. }
  86.  
  87. input[type="range"]::-moz-range-thumb {
  88. background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  89. border: 0;
  90. border-radius: 0;
  91. height: 21px;
  92. transform: translateY(2px);
  93. width: 11px;
  94. }
  95.  
  96. input[type="range"].has-box-indicator::-moz-range-thumb {
  97. background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  98. transform: translateY(0px);
  99. }
  100.  
  101. input[type="range"]::-webkit-slider-runnable-track {
  102. width: 100%;
  103. height: 2px;
  104. box-sizing: border-box;
  105. background: black;
  106. border-right: 1px solid grey;
  107. border-bottom: 1px solid grey;
  108. box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
  109. -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
  110. }
  111.  
  112. input[type="range"]::-moz-range-track {
  113. width: 100%;
  114. height: 2px;
  115. box-sizing: border-box;
  116. background: black;
  117. border-right: 1px solid grey;
  118. border-bottom: 1px solid grey;
  119. box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
  120. -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
  121. }
  122.  
  123. button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
  124.  
  125. .title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}
  126.  
  127. .title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
  128.  
  129. .title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}
  130.  
  131. @media (not(hover)){
  132. button:not(:disabled):hover {
  133. box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
  134. }
  135.  
  136. .title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
  137. .title-bar-controls button::-moz-focus-inner {border:0}
  138.  
  139.  
  140. @font-face {
  141. font-family: "Pixelated MS Sans Serif";
  142. src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  143. src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  144. font-weight: normal;
  145. font-style: normal;
  146. }
  147.  
  148. @font-face {
  149. font-family: "Pixelated MS Sans Serif";
  150. src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  151. src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  152. font-weight: bold;
  153. font-style: normal;
  154. }
  155.  
  156.  
  157. .window, .title-bar {
  158. font-family: "Pixelated MS Sans Serif", Arial;
  159. -webkit-font-smoothing: none;
  160. font-size: 11px;
  161. }
  162.  
  163. .window {
  164. box-shadow: inset -1px -1px #0a0a0a,
  165. inset 1px 1px #dfdfdf, inset -2px -2px #808080,
  166. inset 2px 2px #ffffff;
  167. background: #c0c0c0;
  168. padding: 3px;
  169. width:260px;
  170. }
  171.  
  172. .title-bar {
  173. padding: 3px 2px 3px 3px;
  174. display: flex;
  175. justify-content: space-between;
  176. align-items: center;
  177. }
  178.  
  179. .title-bar-text {
  180. font-weight: bold;
  181. color: white;
  182. letter-spacing: 0;
  183. margin-right: 24px;
  184. }
  185.  
  186. .title-bar-controls {
  187. display: flex;
  188. }
  189.  
  190. .title-bar-controls button {
  191. padding: 0;
  192. display: block;
  193. min-width: 16px;
  194. min-height: 14px;
  195. }
  196.  
  197. .title-bar-controls button:active {
  198. padding: 0;
  199. }
  200.  
  201. .title-bar-controls button:focus {
  202. outline: none;
  203. }
  204.  
  205. .title-bar-controls button[aria-label=Minimize]{
  206. background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
  207. background-position:bottom 3px left 4px;
  208. background-repeat:no-repeat}
  209.  
  210. .title-bar-controls button[aria-label=Maximize]{
  211. background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
  212. background-position:top 2px left 3px;
  213. background-repeat:no-repeat}
  214.  
  215. .title-bar-controls button[aria-label=Close]{
  216. background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
  217. background-position:top 3px left 4px;
  218. background-repeat:no-repeat;
  219. margin-left:2px}
  220.  
  221. .window-body { margin:0px; height:98px; }
  222.  
  223.  
  224.  
  225. input[type=range] {
  226. -webkit-appearance: none;
  227. appearance:none;
  228. width: 100%;
  229. }
  230.  
  231. input[type=range]:focus {
  232. outline: none;
  233. }
  234.  
  235. /* settings for chrome browsers */
  236. input[type=range]::-webkit-slider-runnable-track {
  237. width: 100%;
  238. height: 2px; /* thickness of seeking track */
  239. cursor: help;
  240. }
  241.  
  242.  
  243. /* settings for firefox browsers */
  244. input[type=range]::-moz-range-track {
  245. width: 100%;
  246. height: 2px; /* thickness of seeking track */
  247. cursor: help;
  248. }
  249.  
  250. .flex {display: flex;}
  251.  
  252. .titlebaricon { height:14px; width:14px;}
  253.  
  254.  
  255. .songtitlewindow {
  256. background-color:#fff;
  257. box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
  258. }
  259.  
  260. #musicplayer {
  261. border:2px solid silver; /* border around player */
  262. border-width: 2px 0px 0px 0px;
  263. width:160px; /* width of the player */
  264. }
  265.  
  266. #imagestyle {
  267. background:silver; /* background color of player */
  268. border:2px solid silver; /* border around player */
  269. width:95px; /* width of the player */
  270. height:95px;
  271. box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
  272. }
  273.  
  274. .ic {
  275. width:90px;
  276. position:relative;
  277. bottom:1px;
  278. right:1px;
  279. overflow:hidden;
  280. padding:2px;
  281. border:2px solid transparent;
  282. }
  283.  
  284. .songtitlearrow {
  285. background-size:100%;
  286. background-repeat:no-repeat;
  287. background-image:url(https://files.catbox.moe/f5e8np.png);
  288. height:21px;
  289. width:21px;
  290. position:relative;
  291. top:2px;
  292. left:-2px;
  293. border:0px solid transparent;
  294. border-width:0px 0px 0px 0px;
  295. }
  296.  
  297. .songtitle {
  298. padding:5px; /* padding around song title */
  299. border-bottom:0px; /* border under song title */
  300. display:block;
  301. font-family:Pixelated MS Sans Serif;
  302. }
  303.  
  304. .controls {
  305. font-size:18px !important; /* size of controls */
  306. text-align:center;
  307. width:100%;
  308. position:relative;
  309. bottom:10px;
  310. }
  311.  
  312. .controls td {
  313. padding:8px 5px 0px 5px; /* padding around controls */
  314. }
  315.  
  316. button {
  317. min-width:40px;
  318. }
  319.  
  320. .seeking {
  321. background-color:#c0c0c0; /* background color of seeking bar */
  322. display:flex;
  323. justify-content: space-evenly;
  324. padding:14px; /* padding around seeking bar */
  325. }
  326.  
  327. .current-time {
  328. padding-right:5px;
  329. }
  330.  
  331. .total-duration {
  332. padding-left:5px;
  333. }
  334. </style>
  335. </head>
  336. <body>
  337. <div class="player">
  338. <div class="window">
  339. <div class="title-bar">
  340. <div class="title-bar-text"><sub><img class="titlebaricon" src="https://files.catbox.moe/tg55zp.png" alt="cd player icon"></sub> CD player</div>
  341. <div class="title-bar-controls">
  342. <button aria-label="Minimize"></button>
  343. <button aria-label="Maximize"></button>
  344. <button aria-label="Close"></button>
  345. </div>
  346. </div>
  347. <div class="window-body">
  348. <div class="flex">
  349. <div id="imagestyle"><img class="ic" src="https://files.catbox.moe/sjxzqw.jpg" alt="momo icon"></div>
  350. <div id="musicplayer">
  351. <div class="songtitlewindow">
  352. <div class="flex"><marquee scrollamount="4" class="songtitle"></marquee><div class="songtitlearrow"></div></div>
  353. </div>
  354.  
  355. <div class="seeking">
  356. <div class="current-time">00:00</div>
  357.  
  358. <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  359.  
  360. <div class="total-duration">0:00</div>
  361. </div>
  362.  
  363. <table class="controls">
  364. <tr>
  365. <td>
  366. <div class="prev-track" onclick="prevTrack()"><button><i class="fas fa-backward"></i></button></div>
  367. </td>
  368. <td>
  369. <div class="playpause-track" onclick="playpauseTrack()" ><button><i class="fas fa-play"></i></button></div>
  370. </td>
  371. <td>
  372. <div class="next-track" onclick="nextTrack()"><button><i class="fas fa-forward"></i></button></div>
  373. </td>
  374. </tr>
  375. </table>
  376.  
  377. <audio id="music" src=""></audio>
  378. </div>
  379. </div>
  380. </div>
  381. </div>
  382. </div>
  383. </body>
  384.  
  385. <script>
  386. // initiate variables
  387. let track_name = document.querySelector(".songtitle");
  388.  
  389. let playpause_btn = document.querySelector(".playpause-track");
  390. let next_btn = document.querySelector(".next-track");
  391. let prev_btn = document.querySelector(".prev-track");
  392.  
  393. let seek_slider = document.querySelector(".seek_slider");
  394. let curr_time = document.querySelector(".current-time");
  395. let total_duration = document.querySelector(".total-duration");
  396.  
  397. let track_index = 0;
  398. let isPlaying = false;
  399. let updateTimer;
  400.  
  401. // create new audio element
  402. let curr_track = document.getElementById("music");
  403.  
  404. //
  405. // DEFINE YOUR SONGS HERE!!!!!
  406. // MORE THAN FOUR SONGS CAN BE ADDED!!
  407. // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  408. // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  409. let track_list = [
  410. {
  411. name:"One Shot One Kill - The Cat's Whiskers",
  412. path:"https://files.catbox.moe/fegzmf.mp3"
  413. },
  414. {
  415. name:"Shooting Arrows - The Cat's Whiskers",
  416. path:"https://files.catbox.moe/zj81lr.mp3"
  417. },
  418. {
  419. name:"4 REAL - The Cat's Whiskers",
  420. path:"https://files.catbox.moe/fxd8fo.mp3"
  421. },
  422. {
  423. name:"My Sweetest Love - The Cat's Whiskers ft. Kazuma Mitchell",
  424. path:"https://files.catbox.moe/qe4he5.mp3"
  425. },
  426. {
  427. name:"Mercy On Me - The Cat's Whiskers",
  428. path:"https://files.catbox.moe/w7nnf9.mp3"
  429. }
  430. ];
  431. //
  432. //
  433. //
  434. //
  435. //
  436.  
  437. function loadTrack(track_index) {
  438. clearInterval(updateTimer);
  439. resetValues();
  440.  
  441. // load a new track
  442. curr_track.src = track_list[track_index].path;
  443. curr_track.load();
  444.  
  445. // update details of the track
  446. track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;
  447.  
  448. // set an interval of 1000 milliseconds for updating the seek slider
  449. updateTimer = setInterval(seekUpdate, 1000);
  450.  
  451. // move to the next track if the current one finishes playing
  452. curr_track.addEventListener("ended", nextTrack);
  453. }
  454.  
  455. // reset values
  456. function resetValues() {
  457. curr_time.textContent = "0:00";
  458. total_duration.textContent = "0:00";
  459. seek_slider.value = 0;
  460. }
  461.  
  462. // checks if song is playing
  463. function playpauseTrack() {
  464. if (!isPlaying) playTrack();
  465. else pauseTrack();
  466. }
  467.  
  468. // plays track when play button is pressed
  469. function playTrack() {
  470. curr_track.play();
  471. isPlaying = true;
  472.  
  473. // replace icon with the pause icon
  474. playpause_btn.innerHTML = '<button><i class="fas fa-pause"></i></button>';
  475. }
  476.  
  477. // pauses track when pause button is pressed
  478. function pauseTrack() {
  479. curr_track.pause();
  480. isPlaying = false;
  481.  
  482. // replace icon with the play icon
  483. playpause_btn.innerHTML = '<button><i class="fas fa-play"></i></button>';
  484. }
  485.  
  486. // moves to the next track
  487. function nextTrack() {
  488. if (track_index < track_list.length - 1)
  489. track_index += 1;
  490. else track_index = 0;
  491. loadTrack(track_index);
  492. playTrack();
  493. }
  494.  
  495. // moves to the previous track
  496. function prevTrack() {
  497. if (track_index > 0)
  498. track_index -= 1;
  499. else track_index = track_list.length;
  500. loadTrack(track_index);
  501. playTrack();
  502. }
  503.  
  504. // seeker slider
  505. function seekTo() {
  506. seekto = curr_track.duration * (seek_slider.value / 100);
  507. curr_track.currentTime = seekto;
  508. }
  509.  
  510. function seekUpdate() {
  511. let seekPosition = 0;
  512.  
  513. // check if the current track duration is a legible number
  514. if (!isNaN(curr_track.duration)) {
  515. seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  516. seek_slider.value = seekPosition;
  517.  
  518. // calculate the time left and the total duration
  519. let currentMinutes = Math.floor(curr_track.currentTime / 60);
  520. let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  521. let durationMinutes = Math.floor(curr_track.duration / 60);
  522. let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  523.  
  524. // adding a zero to the single digit time values
  525. if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  526. if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  527. if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  528. if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  529.  
  530. curr_time.textContent = currentMinutes + ":" + currentSeconds;
  531. total_duration.textContent = durationMinutes + ":" + durationSeconds;
  532. }
  533. }
  534.  
  535. // load the first track in the tracklist
  536. loadTrack(track_index);
  537. </script>
Add Comment
Please, Sign In to add comment