API tools faq
paste
loveberry

win98 music player

loveberry
Jun 29th, 2023 (edited)
2,914
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.07 KB | None | 1 0
raw download clone embed print report
  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
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!