Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- #musicplayer{
- font-family:'Arial'; /* default font */
- background:white; /* background color of player */
- border:4px solid #4cd4de; /* 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:#e74492; /* 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:#c9eff2; /* background color of top two boxes */
- }
- .now-playing{
- font-weight:bold;
- }
- input[type=range]{
- -webkit-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:#e74492; /* 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:#e74492; /* 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:#e74492; /* 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:#e74492; /* color of seeker square */
- border:none; /* removes weird border around seeker square in firefox */
- }
- </style>
- </head>
- <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()"> <!-- 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) -->
- </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:"Lagtrain",
- artist:"inabakumori",
- path:"https://files.catbox.moe/9ywkki.mp3"
- },
- {
- name:"Kimi ni Kaikisen",
- artist:"inabakumori",
- path:"https://files.catbox.moe/1pxdnw.mp3"
- },
- {
- name:"God-ish",
- artist:"Pinocchio-P",
- path:"https://files.catbox.moe/xv3vdj.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>
Add Comment
Please, Sign In to add comment