API tools faq
paste
loveberry

win98 music player (no fontawesome update)

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