Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <script src="https://unpkg.com/phosphor-icons"></script>
- <style>
- #musicplayer {
- width: 60%;
- }
- .songtitle {
- font-family: Nintendo-DS-BIOS;
- font-size: 1em;
- color: white;
- -webkit-filter: drop-shadow(0px 0px 1px #fff);
- }
- .controls {
- font-size: 18px !important;
- text-align: center;
- width: 100%;
- }
- .controls td {
- padding: 0px 5px 0px 5px;
- }
- .seeking {
- display: flex;
- justify-content: space-evenly;
- }
- .current-time {
- padding-right: 5px;
- font-family: Nintendo-DS-BIOS;
- font-size: .75em;
- color: #fff;
- }
- .total-duration {
- padding-left: 5px;
- font-family: Nintendo-DS-BIOS;
- font-size: .75em;
- color: #fff;
- }
- input[type=range] {
- -webkit-appearance: none;
- width: 100%;
- background-color: transparent;
- }
- input[type=range]:focus {
- outline: none;
- }
- input[type=range]::-webkit-slider-runnable-track {
- width: 100%;
- height: 2px;
- cursor: help;
- animate: 0.2s;
- background: #fff;
- border-radius: 1px;
- }
- input[type=range]::-webkit-slider-thumb {
- border: 0px solid #fff;
- height: 10px;
- width: 10px;
- border-radius: 10px;
- background: #fff;
- cursor: help;
- -webkit-appearance: none;
- margin-top: -4px;
- }
- input[type=range]:focus::-webkit-slider-runnable-track {
- background: #fff;
- }
- input[type=range]::-moz-range-track {
- width: 100%;
- height: 2px;
- cursor: help;
- animate: 0.2s;
- background: #fff;
- border-radius: 1px;
- }
- input[type=range]::-moz-range-thumb {
- border: 0px solid #fff;
- height: 10px;
- width: 10px;
- border-radius: 10px;
- background: #fff;
- cursor: help;
- }
- input[type=range]::-ms-track {
- width: 100%;
- height: 2px;
- cursor: help;
- animate: 0.2s;
- background: transparent;
- border-color: transparent;
- color: transparent;
- }
- input[type=range]::-ms-fill-lower {
- background: #fff;
- border-radius: 2px;
- }
- input[type=range]::-ms-fill-upper {
- background: #fff;
- border-radius: 2px;
- }
- input[type=range]::-ms-thumb {
- margin-top: 1px;
- border: 0px solid #fff;
- height: 10px;
- width: 10px;
- border-radius: 10px;
- background: #fff;
- cursor: help;
- }
- input[type=range]:focus::-ms-fill-lower {
- background: #fff;
- }
- input[type=range]:focus::-ms-fill-upper {
- background: #fff;
- }
- </style>
- </head>
- <body>
- <center>
- <div id="musicplayer">
- <div>
- <div class="songtitle"></div>
- <table class="controls">
- <tr>
- <td>
- <div class="prev-track" onclick="prevTrack()"><i class="ph-skip-back-fill" style="color: #fff"></i></div>
- </td>
- <td>
- <div class="playpause-track" onclick="playpauseTrack()" ><i class="ph-play-fill" style="color: #fff"></i></div>
- </td>
- <td>
- <div class="next-track" onclick="nextTrack()"><i class="ph-skip-forward-fill" style="color: #fff"></i></div>
- </td>
- </tr>
- </table>
- <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>
- <audio id="music" src=""></audio>
- </div>
- </div>
- </center>
- <script>
- 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 the tracks that have to be played
- let track_list = [
- {
- name:"cry baby",
- path:"https://cdn.discordapp.com/attachments/849646455948967958/980459406368079872/Cry_Babyver._RAISE_A_SUILEN.mp3"
- },
- {
- name:"new beginning",
- path:"https://cdn.discordapp.com/attachments/849646455948967958/1004014122985336882/Ado__from_ONE_PIECE_FILM_RED.mp3"
- },
- {
- name:"finder girl",
- path:"https://cdn.discordapp.com/attachments/918443780150009886/951017710354063370/ESFinder_Girl.mp3"
- },
- {
- name: "king",
- path: "https://cdn.discordapp.com/attachments/918443780150009886/988104727923413033/KING_.mp3",
- },
- ];
- function loadTrack(track_index) {
- clearInterval(updateTimer);
- resetValues();
- // Load a new track
- curr_track.src = track_list[track_index].path;
- curr_track.load();
- // 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;
- }
- function playpauseTrack() {
- if (!isPlaying) playTrack();
- else pauseTrack();
- }
- function playTrack() {
- curr_track.play();
- isPlaying = true;
- // Replace icon with the pause icon
- playpause_btn.innerHTML = '<i class="ph-pause-fill" style="color: #CCDCEC"></i>';
- }
- function pauseTrack() {
- curr_track.pause();
- isPlaying = false;
- // Replace icon with the play icon
- playpause_btn.innerHTML = '<i class="ph-play-fill" style="color: #CCDCEC"></i>';
- }
- function nextTrack() {
- if (track_index < track_list.length - 1)
- track_index += 1;
- else track_index = 0;
- loadTrack(track_index);
- playTrack();
- }
- function prevTrack() {
- if (track_index > 0)
- track_index -= 1;
- else track_index = track_list.length;
- loadTrack(track_index);
- playTrack();
- }
- 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>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement