The Lab | Music Players

Music Player 1

// Paste this inside <head> </head>: <style> #musicplayer { font-family: 'Arial'; /* default font */ background: rgb(0, 0, 0); /* background color of player */ border: 4px solid #bbff00; /* border around player */ width: 200px; /* width of the player - make it 100% if you want it to fill your container */ padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; } .songtitle, .track-info, .now-playing { padding: 5px; } .controls { display: flex; flex-direction: column; gap: 10px; } .buttons { display: flex; justify-content: center; font-size: 17px !important; /* size of controls */ width: 100%; } .buttons div { width: 33.3%; } .playpause-track, .prev-track, .next-track { color: #bbff00; /* color of buttons */ font-size: 35px !important; /* size of buttons */ } .volume-icon { font-size: 22px !important; /* size of volume icon */ } .seeking, .volume { display: flex; flex-direction: row; align-items: center; gap: 5px; } .now-playing, .track-info { background-color: #bbff00; /* background color of top two boxes */ } .now-playing { font-weight: bold; } input[type=range] { appearance: none; /* removes default appearance of the tracks */ width: 100%; } input[type=range]:focus { outline: none; /* removes outline around tracks when focusing */ } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; /* thickness of seeking track */ background: #bbff00; /* color of seeking track */ } input[type=range]::-webkit-slider-thumb { height: 10px; /* height of seeking square */ width: 10px; /* width of seeking square */ border-radius: 0px; /* change to 5px if you want a circle seeker */ background: #bbff00; /* color of seeker square */ -webkit-appearance: none; margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */ } input[type=range]::-moz-range-track { width: 100%; height: 4px; /* thickness of seeking track */ background: #bbff00; /* color of seeking track */ } input[type=range]::-moz-range-thumb { height: 10px; /* height of seeking square */ width: 10px; /* width of seeking square */ border-radius: 0px; /* change to 5px if you want a circle seeker */ background: #bbff00; /* color of seeker square */ border: none; /* removes weird border around seeker square in firefox */ } </style> // Place this in <body></body> <div id="musicplayer"> <div class="now-playing">Playing 1 of 2</div> <div class="track-info"> <div class="track-name">Song Name</div> <div class="track-artist"></div> </div> <div class="controls"> <div class="seeking"> <div class="current-time">00:00</div> <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()"> <div class="total-duration">0:00</div> </div> <div class="buttons"> <div class="prev-track" onclick="prevTrack()">«</div> <div class="playpause-track" onclick="playpauseTrack()">▶</div> <div class="next-track" onclick="nextTrack()">»</div> </div> <div class="volume"> <div class="volume-icon">🕪</div> <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()">  </div> </div> <audio id="music" src=""></audio> </div> <script> // initiate variables let now_playing = document.querySelector(".now-playing"); let track_name = document.querySelector(".track-name"); let track_artist = document.querySelector(".track-artist"); let playpause_btn = document.querySelector(".playpause-track"); let next_btn = document.querySelector(".next-track"); let prev_btn = document.querySelector(".prev-track"); let seek_slider = document.querySelector(".seek_slider"); let volume_slider = document.querySelector(".volume_slider"); let curr_time = document.querySelector(".current-time"); let total_duration = document.querySelector(".total-duration"); let track_index = 0; let isPlaying = false; let updateTimer; // create new audio element let curr_track = document.getElementById("music"); // // DEFINE YOUR SONGS HERE!!!!! // MORE THAN FOUR SONGS CAN BE ADDED!! // JUST ADD ANOTHER BRACKET WITH NAME ARTIST AND PATH // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES IF YOU DON'T HAVE NEOCITIES SUPPORTER let track_list = [ { name: "Gaijin", artist: "Elijah Nang", path: "https://files.catbox.moe/0czhcg.mp3" }, { name: "Relaxing and Rain", artist: "Animal Crossing", path: "https://files.catbox.moe/nwewpp.mp3" }, { name: "number 1", artist: "기분이 편안해지는 귀여운 음악 모음", path: "https://files.catbox.moe/lz5ogz.mp3" }, { name: "Her Boyfriend, Jude", artist: "Syudou", path: "https://files.catbox.moe/49iuxl.mp3", }, ]; // // // // // function loadTrack(track_index) { clearInterval(updateTimer); resetValues(); // load a new track curr_track.src = track_list[track_index].path; curr_track.load(); // update details of the track track_name.textContent = track_list[track_index].name; track_artist.textContent = track_list[track_index].artist; now_playing.textContent = "Playing " + (track_index + 1) + " of " + track_list.length; // set an interval of 1000 milliseconds for updating the seek slider updateTimer = setInterval(seekUpdate, 1000); // move to the next track if the current one finishes playing curr_track.addEventListener("ended", nextTrack); } // reset values function resetValues() { curr_time.textContent = "0:00"; total_duration.textContent = "0:00"; seek_slider.value = 0; } // load the first track in the tracklist loadTrack(track_index); // checks if song is playing function playpauseTrack() { if (!isPlaying) playTrack(); else pauseTrack(); } // plays track when play button is pressed function playTrack() { curr_track.play(); isPlaying = true; // replace icon with the pause icon playpause_btn.innerHTML = '▮'; } // pauses track when pause button is pressed function pauseTrack() { curr_track.pause(); isPlaying = false; playpause_btn.innerHTML = '▶'; } // moves to the next track function nextTrack() { if (track_index < track_list.length - 1) track_index += 1; else track_index = 0; loadTrack(track_index); playTrack(); } // moves to the previous track function prevTrack() { if (track_index > 0) track_index -= 1; else track_index = track_list.length; loadTrack(track_index); playTrack(); } // seeker slider function seekTo() { seekto = curr_track.duration * (seek_slider.value / 100); curr_track.currentTime = seekto; } // volume slider function setVolume() { curr_track.volume = volume_slider.value / 100; } setVolume(); function seekUpdate() { let seekPosition = 0; // check if the current track duration is a legible number if (!isNaN(curr_track.duration)) { seekPosition = curr_track.currentTime * (100 / curr_track.duration); seek_slider.value = seekPosition; // calculate the time left and the total duration let currentMinutes = Math.floor(curr_track.currentTime / 60); let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60); let durationMinutes = Math.floor(curr_track.duration / 60); let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60); // adding a zero to the single digit time values if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } if (currentMinutes < 10) { currentMinutes = currentMinutes; } if (durationMinutes < 10) { durationMinutes = durationMinutes; } curr_time.textContent = currentMinutes + ":" + currentSeconds; total_duration.textContent = durationMinutes + ":" + durationSeconds; } } </script>
Code: adilene.net music player (lite)

Music Player 2

//Paste this inside <head></head>: <style> body, html { overflow-x: hidden } lol, .img2 { /* album's cover image u can change the size! */ position: relative; width: 180px; height: 180px; background-color: black; color: black; z-index: 999; } .img1 { /* cd image u can change the size too */ position: absolute; width: auto; height: 180px; left: 120px; z-index: 800; -webkit-animation: spin 2s linear infinite; -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; } .img1 hover { cursor: help; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .img1:hover { /* this makes the cd stop spinning when hovering! */ animation: pop 0.3s ease; } </style> // Paste this inside <body></body>: <div id="lol"><img class="img2" src="https://vgmsite.com/soundtracks/animal-crossing-new-horizons-2020-switch-gamerip/Cover_Alt.jpg"><img class="img1" src="https://web.archive.org/web/20220514070535im_/https://cdn.discordapp.com/attachments/822589056256311328/890714753780031488/image0.png"> </div> <script> document.getElementById("lol").onclick = function () { var audio = document.getElementById("audio"); if (audio.paused) audio.play(); else audio.pause(); }; </script><audio id="audio" src="https://files.catbox.moe/nwewpp.mp3"></audio>
Code: [music player] spinning album CD player. cr @girisgoblog

Music Player 3

// Paste this inside <head></head>: <style> .title-bar { background: linear-gradient(90deg, purple, orchid, pink); } .player { width: fit-content; border: black solid 1px; border-width: 1px 0px 0px 1px; margin-left: auto; margin-right: auto; } .controlimg:hover { cursor: help; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 21px; width: 11px; background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg"); transform: translateY(-8px); box-shadow: none; border: none; } input[type="range"].has-box-indicator::-webkit-slider-thumb { background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg"); transform: translateY(-10px); } input[type="range"]::-moz-range-thumb { height: 21px; width: 11px; border: 0; border-radius: 0; background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg"); transform: translateY(2px); } input[type="range"]::-moz-range-thumb { background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg"); border: 0; border-radius: 0; height: 21px; transform: translateY(2px); width: 11px; } input[type="range"].has-box-indicator::-moz-range-thumb { background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg"); transform: translateY(0px); } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; box-sizing: border-box; background: black; border-right: 1px solid grey; border-bottom: 1px solid grey; box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey; } input[type="range"]::-moz-range-track { width: 100%; height: 2px; box-sizing: border-box; background: black; border-right: 1px solid grey; border-bottom: 1px solid grey; box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey; } 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 } .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 } .title-bar-controls button { background: silver; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf } .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 } @media (not(hover)) { button:not(:disabled):hover { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey } } .title-bar-controls button:focus { outline: 1px dotted #000; outline-offset: -4px } .title-bar-controls button::-moz-focus-inner { border: 0 } @font-face { font-family: "Pixelated MS Sans Serif"; src: url("https://files.catbox.moe/1za99g.woff") format("woff"); src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2"); font-weight: normal; font-style: normal; } @font-face { font-family: "Pixelated MS Sans Serif"; src: url("https://files.catbox.moe/z7csle.woff") format("woff"); src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2"); font-weight: bold; font-style: normal; } .window, .title-bar { font-family: "Pixelated MS Sans Serif", Arial; -webkit-font-smoothing: none; font-size: 11px; } .window { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff; background: #c0c0c0; padding: 3px; width: 260px; } .title-bar { padding: 3px 2px 3px 3px; display: flex; justify-content: space-between; align-items: center; } .title-bar-text { font-weight: bold; color: white; letter-spacing: 0; margin-right: 24px; } .title-bar-controls { display: flex; } .title-bar-controls button { padding: 0; display: block; min-width: 16px; min-height: 14px; } .title-bar-controls button:active { padding: 0; } .title-bar-controls button:focus { outline: none; } .title-bar-controls button[aria-label=Minimize] { background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg"); background-position: bottom 3px left 4px; background-repeat: no-repeat } .title-bar-controls button[aria-label=Maximize] { background-image: url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg"); background-position: top 2px left 3px; background-repeat: no-repeat } .title-bar-controls button[aria-label=Close] { background-image: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg"); background-position: top 3px left 4px; background-repeat: no-repeat; margin-left: 2px } .window-body { margin: 0px; height: 98px; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; } input[type=range]:focus { outline: none; } /* settings for chrome browsers */ input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; /* thickness of seeking track */ cursor: help; } /* settings for firefox browsers */ input[type=range]::-moz-range-track { width: 100%; height: 2px; /* thickness of seeking track */ cursor: help; } .flex { display: flex; } .titlebaricon { height: 14px; width: 14px; } .songtitlewindow { background-color: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } #musicplayer { border: 2px solid silver; /* border around player */ border-width: 2px 0px 0px 0px; width: 160px; /* width of the player */ } #imagestyle { background: silver; /* background color of player */ border: 2px solid silver; /* border around player */ width: 95px; /* width of the player */ height: 95px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .ic { width: 90px; position: relative; bottom: 1px; right: 1px; overflow: hidden; padding: 2px; border: 2px solid transparent; } .songtitlearrow { background-size: 100%; background-repeat: no-repeat; background-image: url(https://files.catbox.moe/f5e8np.png); height: 21px; width: 21px; position: relative; top: 2px; left: -2px; border: 0px solid transparent; border-width: 0px 0px 0px 0px; } .songtitle { padding: 5px; /* padding around song title */ border-bottom: 0px; /* border under song title */ display: block; font-family: Pixelated MS Sans Serif; } .controls { font-size: 18px !important; /* size of controls */ text-align: center; width: 100%; position: relative; bottom: 10px; } .controls td { padding: 8px 5px 0px 5px; /* padding around controls */ } button { min-width: 40px; } .seeking { background-color: #c0c0c0; /* background color of seeking bar */ display: flex; justify-content: space-evenly; padding: 14px; /* padding around seeking bar */ } .current-time { padding-right: 5px; } .total-duration { padding-left: 5px; } .controlimg { height: 15px; width: 15px; } </style> // Paste this inside <body></body>: <div class="player"> <div class="window"> <div class="title-bar"> <div class="title-bar-text"><sub><img class="titlebaricon" src="https://files.catbox.moe/tg55zp.png" alt="cd player icon"></sub> CD player</div> <div class="title-bar-controls"> <button aria-label="Minimize"></button> <button aria-label="Maximize"></button> <button aria-label="Close"></button> </div> </div> <div class="window-body"> <div class="flex"> <div id="imagestyle"><img class="ic" src="https://i.etsystatic.com/11348985/r/il/9597b7/5123050386/il_1588xN.5123050386_eqou.jpg" alt="momo icon"> </div> <div id="musicplayer"> <div class="songtitlewindow"> <div class="flex"> <marquee scrollamount="4" class="songtitle"></marquee> <div class="songtitlearrow"></div> </div> </div> <div class="seeking"> <div class="current-time">00:00</div> <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()"> <div class="total-duration">0:00</div> </div> <table class="controls"> <tr> <td> <div class="prev-track" onclick="prevTrack()"><button><img src="https://files.catbox.moe/hhoh1h.png" class="controlimg"></button> </div> </td> <td> <div class="playpause-track" onclick="playpauseTrack()"><button><img src="https://files.catbox.moe/w93riq.png" class="controlimg"></button> </div> </td> <td> <div class="next-track" onclick="nextTrack()"><button><img src="https://files.catbox.moe/p4q9gf.png" class="controlimg"></button> </div> </td> </tr> </table> <audio id="music" src=""></audio> </div> </div> </div> </div> </div> <script> // initiate variables let track_name = document.querySelector(".songtitle"); let playpause_btn = document.querySelector(".playpause-track"); let next_btn = document.querySelector(".next-track"); let prev_btn = document.querySelector(".prev-track"); let seek_slider = document.querySelector(".seek_slider"); let curr_time = document.querySelector(".current-time"); let total_duration = document.querySelector(".total-duration"); let track_index = 0; let isPlaying = false; let updateTimer; // create new audio element let curr_track = document.getElementById("music"); // // DEFINE YOUR SONGS HERE!!!!! // MORE THAN FOUR SONGS CAN BE ADDED!! // JUST ADD ANOTHER BRACKET WITH NAME AND PATH // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES let track_list = [ { name: "Animal Crossing - Relaxing and Rain", path: "https://files.catbox.moe/nwewpp.mp3" }, { name: "Shooting Arrows - The Cat's Whiskers", path: "https://files.catbox.moe/zj81lr.mp3" }, { name: "4 REAL - The Cat's Whiskers", path: "https://files.catbox.moe/fxd8fo.mp3" }, { name: "My Sweetest Love - The Cat's Whiskers ft. Kazuma Mitchell", path: "https://files.catbox.moe/qe4he5.mp3" }, { name: "Mercy On Me - The Cat's Whiskers", path: "https://files.catbox.moe/w7nnf9.mp3" } ]; // // // // // function loadTrack(track_index) { clearInterval(updateTimer); resetValues(); // load a new track curr_track.src = track_list[track_index].path; curr_track.load(); // update details of the track track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name; // set an interval of 1000 milliseconds for updating the seek slider updateTimer = setInterval(seekUpdate, 1000); // move to the next track if the current one finishes playing curr_track.addEventListener("ended", nextTrack); } // reset values function resetValues() { curr_time.textContent = "0:00"; total_duration.textContent = "0:00"; seek_slider.value = 0; } // checks if song is playing function playpauseTrack() { if (!isPlaying) playTrack(); else pauseTrack(); } // plays track when play button is pressed function playTrack() { curr_track.play(); isPlaying = true; // replace icon with the pause icon playpause_btn.innerHTML = '<button><img src="https://files.catbox.moe/njer0s.png" class="controlimg"></i></button>'; } // pauses track when pause button is pressed function pauseTrack() { curr_track.pause(); isPlaying = false; // replace icon with the play icon playpause_btn.innerHTML = '<button><img src="https://files.catbox.moe/w93riq.png" class="controlimg"></button>'; } // moves to the next track function nextTrack() { if (track_index < track_list.length - 1) track_index += 1; else track_index = 0; loadTrack(track_index); playTrack(); } // moves to the previous track function prevTrack() { if (track_index > 0) track_index -= 1; else track_index = track_list.length; loadTrack(track_index); playTrack(); } // seeker slider function seekTo() { seekto = curr_track.duration * (seek_slider.value / 100); curr_track.currentTime = seekto; } function seekUpdate() { let seekPosition = 0; // check if the current track duration is a legible number if (!isNaN(curr_track.duration)) { seekPosition = curr_track.currentTime * (100 / curr_track.duration); seek_slider.value = seekPosition; // calculate the time left and the total duration let currentMinutes = Math.floor(curr_track.currentTime / 60); let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60); let durationMinutes = Math.floor(curr_track.duration / 60); let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60); // adding a zero to the single digit time values if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } if (currentMinutes < 10) { currentMinutes = currentMinutes; } if (durationMinutes < 10) { durationMinutes = durationMinutes; } curr_time.textContent = currentMinutes + ":" + currentSeconds; total_duration.textContent = durationMinutes + ":" + durationSeconds; } } // load the first track in the tracklist loadTrack(track_index); </script>
Code: win98 music player (no fontawesome update)

Music Player 4

// Paste this inside <head></head>: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script> <style type="text/css"> /*-------MUSIC PLAYER BY GLENTHEMES-------*/ #glenplayer02 { position: relative; top: 0px; left: 5px; display: flex; z-index: 99; } #glenplayer02 a { text-decoration: none; } #glenplayer02>div { align-self: center; -webkit-align-self: center; } .music-controls { user-select: none; -webkit-user-select: none; width: 13px; font-size: 18px; cursor: pointer; } .playy, .pausee { color: #F6D5F0; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; } /* color of play & pause buttons */ .pausee { display: none; } .sonata { margin-left: 10px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 14px; color: #F6D5F0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */ } .labeltext { margin-left: 0px; position: relative; bottom: 10px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 14px; color: #F6D5F0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of song title */ } </style> // Paste this inside <body></body> <div id="glenplayer02"> <div class="music-controls" onclick="songstart();"> <div class="playy">►</div> <div class="pausee">♬</div> </div> <div class="sonata"> <marquee> Animal Crossing - Relaxing and Rain </marquee> </div> <div class="labeltext"></div> </div> <audio id="tune" src="https://files.catbox.moe/nwewpp.mp3""audio"></audio> </body> <div class="labeltext"> </div>
Code: Music player by GlenThemes

Music Player 5

// Paste this inside <head></head>: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script> <style type="text/css"> /*-------MUSIC PLAYER BY GLENTHEMES-------*/ #glenplayer02 { position: fixed; top: 2em; margin-bottom: 20px; left: 0; margin-left: 20px; display: flex; z-index: 99; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; } #glenplayer02 a { text-decoration: none; } #glenplayer02>div { align-self: center; -webkit-align-self: center; } .music-controls { user-select: none; -webkit-user-select: none; width: 13px; font-size: 13px; cursor: pointer; } .playy, .pausee { color: #fff; } /* color of play & pause buttons */ .pausee { display: none; } .sonata { margin-left: 10px; color: #000; /* color of music note symbol */ } .labeltext { margin-left: 1px; font-family: courier new; font-size: 9px; color: #fff; /* color of song title */ } </style> // Paste this inside <body></body>:  <div id="glenplayer02"> <div class="music-controls" onclick="songstart();"> <div class="playy">►</div> <div class="pausee">❚❚</div> </div> <div class="sonata"> </div> <div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"><img src="https://64.media.tumblr.com/tumblr_lu2dd4ocjj1qfoi4t.gif"> </div> </div> <audio id="tune" src="https://dl.dropbox.com/s/s3mf24vc2gv6y92/%5BEXID%28%EC%9D%B4%EC%97%91%EC%8A%A4%EC%95%84%EC%9D%B4%EB%94%94%29%5D%20%EB%82%B4%EC%9D%BC%ED%95%B4%28LADY%29%20%EB%AE%A4%EC%A7%81%20%EB%B9%84%EB%94%94%EC%98%A4%20%28Official%20Music%20Video%29.mp3?" audio"></audio> </body> <div class="labeltext"> </div>
Code: Music player by GlenThemes