API tools faq
paste
Sky_Blue

multiple song music player

Sky_Blue
Oct 8th, 2022
5,856
4
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.57 KB | None | 4 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    
  5. <!-----
  6.  
  7.    multiple song music player by adilene @ adilene.net. free to use and edit as you like! credit is not necessary, but it is appreciated! <3
  8.  
  9.    if you need any help feel free to reach out to me at adilene.net!
  10.  
  11.    source code: https://github.com/sayantanm19/js-music-player
  12.  
  13. ----->
  14.    
  15.     <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script> <!-- add this to the head!! -->
  16.  
  17. </head>
  18. <style>
  19.     #musicplayer{
  20.         background:white; /* background color of player */
  21.         border:2px solid #e74492; /* border around player */
  22.         width:200px; /* width of the player */
  23.     }
  24.  
  25.     .songtitle{
  26.         padding:5px; /* padding around song title */
  27.         border-bottom:2px solid #e74492; /* border under song title */
  28.         display:block;
  29.     }
  30.  
  31.     .controls{
  32.         font-size:18px !important; /* size of controls */
  33.         background-color:#dbfcff; /* background color of controls */
  34.         text-align:center;
  35.         width:100%;
  36.     }
  37.  
  38.     .controls td{
  39.         padding:8px 5px 0px 5px; /* padding around controls */
  40.     }
  41.  
  42.     .seeking{
  43.         background-color:#dbfcff; /* background color of seeking bar */
  44.         display:flex;
  45.         justify-content: space-evenly;
  46.         padding:5px; /* padding around seeking bar */
  47.     }
  48.  
  49.     .current-time{
  50.         padding-right:5px;
  51.     }
  52.  
  53.     .total-duration{
  54.         padding-left:5px;
  55.     }
  56.  
  57.     i.fas:hover{
  58.         cursor:help;
  59.     }
  60.  
  61.     i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
  62.         color:#e74492; /* color of controls */
  63.     }
  64.    
  65.     input[type=range] {
  66.         -webkit-appearance: none;
  67.         width: 100%;
  68.         background-color:#dbfcff; /* background color of seeking bar - make the color same as .seeking background color */
  69.     }
  70.    
  71.     input[type=range]:focus {
  72.         outline: none;
  73.     }
  74.    
  75.     /* settings for chrome browsers */
  76.     input[type=range]::-webkit-slider-runnable-track {
  77.         width: 100%;
  78.         height: 2px; /* thickness of seeking track */
  79.         cursor: help;
  80.         background: #E74492; /* color of seeking track */
  81.     }
  82.    
  83.     input[type=range]::-webkit-slider-thumb {
  84.         height: 10px; /* height of seeking square */
  85.         width: 10px; /* width of seeking square */
  86.         border-radius: 0px; /* change to 5px if you want a circle seeker */
  87.         background: #E74492; /* color of seeker square */
  88.         cursor: help;
  89.         -webkit-appearance: none;
  90.         margin-top: -4.5px;
  91.     }
  92.    
  93.     /* settings for firefox browsers */
  94.     input[type=range]::-moz-range-track {
  95.         width: 100%;
  96.         height: 2px; /* thickness of seeking track */
  97.         cursor: help;
  98.         background: #E74492; /* color of seeking track */
  99.     }
  100.    
  101.     input[type=range]::-moz-range-thumb {
  102.         height: 10px; /* height of seeking square */
  103.         width: 10px; /* width of seeking square */
  104.         border-radius: 0px; /* change to 5px if you want a circle seeker */
  105.         background: #E74492; /* color of seeker square */
  106.         cursor: help;
  107.         border:none;
  108.     }
  109. </style>
  110. <body>
  111.     <div id="musicplayer">
  112.         <div>
  113.             <marquee scrollamount="8" class="songtitle"></marquee>
  114.         </div>
  115.  
  116.         <table class="controls">
  117.             <tr>
  118.                 <td>
  119.                     <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
  120.                 </td>
  121.                 <td>
  122.                     <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
  123.                 </td>
  124.                 <td>
  125.                     <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
  126.                 </td>
  127.             </tr>
  128.         </table>
  129.  
  130.         <div class="seeking">
  131.             <div class="current-time">00:00</div>
  132.  
  133.             <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
  134.  
  135.             <div class="total-duration">0:00</div>
  136.         </div>
  137.  
  138.         <audio id="music" src=""></audio>
  139.     </div>
  140.    
  141.     <script>
  142.         // initiate variables
  143.         let track_name = document.querySelector(".songtitle");
  144.  
  145.         let playpause_btn = document.querySelector(".playpause-track");
  146.         let next_btn = document.querySelector(".next-track");
  147.         let prev_btn = document.querySelector(".prev-track");
  148.  
  149.         let seek_slider = document.querySelector(".seek_slider");
  150.         let curr_time = document.querySelector(".current-time");
  151.         let total_duration = document.querySelector(".total-duration");
  152.  
  153.         let track_index = 0;
  154.         let isPlaying = false;
  155.         let updateTimer;
  156.        
  157.         // create new audio element
  158.         let curr_track = document.getElementById("music");
  159.        
  160.         //
  161.         // DEFINE YOUR SONGS HERE!!!!!
  162.         // MORE THAN FOUR SONGS CAN BE ADDED!!
  163.         // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  164.         // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  165.         let track_list = [
  166.             {
  167.                 name:"inabakumori feat. kaai yuki - lagtrain",
  168.                 path:"https://files.catbox.moe/9ywkki.mp3"
  169.             },
  170.             {
  171.                 name:"inabakumori feat. kaai yuki - kimi ni kaikisen",
  172.                 path:"https://files.catbox.moe/1pxdnw.mp3"
  173.             },
  174.             {
  175.                 name:"pinocchio-p feat. hatsune miku - god-ish",
  176.                 path:"https://files.catbox.moe/xv3vdj.mp3"
  177.             },
  178.             {
  179.                 name: "syudou feat. hatsune miku - her boyfriend, jude",
  180.                 path: "https://files.catbox.moe/49iuxl.mp3",
  181.             },
  182.         ];
  183.         //
  184.         //
  185.         //
  186.         //
  187.         //
  188.  
  189.         function loadTrack(track_index) {
  190.             clearInterval(updateTimer);
  191.             resetValues();
  192.  
  193.             // load a new track
  194.             curr_track.src = track_list[track_index].path;
  195.             curr_track.load();
  196.            
  197.             // update details of the track
  198.             track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;
  199.  
  200.             // set an interval of 1000 milliseconds for updating the seek slider
  201.             updateTimer = setInterval(seekUpdate, 1000);
  202.            
  203.             // move to the next track if the current one finishes playing
  204.             curr_track.addEventListener("ended", nextTrack);
  205.         }
  206.  
  207.         // reset values
  208.         function resetValues() {
  209.             curr_time.textContent = "0:00";
  210.             total_duration.textContent = "0:00";
  211.             seek_slider.value = 0;
  212.         }
  213.  
  214.         // checks if song is playing
  215.         function playpauseTrack() {
  216.             if (!isPlaying) playTrack();
  217.             else pauseTrack();
  218.         }
  219.  
  220.         // plays track when play button is pressed
  221.         function playTrack() {
  222.             curr_track.play();
  223.             isPlaying = true;
  224.            
  225.             // replace icon with the pause icon
  226.             playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
  227.         }
  228.  
  229.         // pauses track when pause button is pressed
  230.         function pauseTrack() {
  231.             curr_track.pause();
  232.             isPlaying = false;
  233.            
  234.             // replace icon with the play icon
  235.             playpause_btn.innerHTML = '<i class="fas fa-play"></i>';
  236.         }
  237.  
  238.         // moves to the next track
  239.         function nextTrack() {
  240.             if (track_index < track_list.length - 1)
  241.                track_index += 1;
  242.            else track_index = 0;
  243.            loadTrack(track_index);
  244.            playTrack();
  245.        }
  246.  
  247.        // moves to the previous track
  248.        function prevTrack() {
  249.            if (track_index > 0)
  250.                 track_index -= 1;
  251.             else track_index = track_list.length;
  252.             loadTrack(track_index);
  253.             playTrack();
  254.         }
  255.  
  256.         // seeker slider
  257.         function seekTo() {
  258.             seekto = curr_track.duration * (seek_slider.value / 100);
  259.             curr_track.currentTime = seekto;
  260.         }
  261.  
  262.         function seekUpdate() {
  263.             let seekPosition = 0;
  264.            
  265.             // check if the current track duration is a legible number
  266.             if (!isNaN(curr_track.duration)) {
  267.                 seekPosition = curr_track.currentTime * (100 / curr_track.duration);
  268.                 seek_slider.value = seekPosition;
  269.                
  270.             // calculate the time left and the total duration
  271.             let currentMinutes = Math.floor(curr_track.currentTime / 60);
  272.             let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
  273.             let durationMinutes = Math.floor(curr_track.duration / 60);
  274.             let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
  275.                
  276.             // adding a zero to the single digit time values
  277.             if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
  278.            if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
  279.            if (currentMinutes < 10) { currentMinutes = currentMinutes; }
  280.            if (durationMinutes < 10) { durationMinutes = durationMinutes; }
  281.  
  282.            curr_time.textContent = currentMinutes + ":" + currentSeconds;
  283.            total_duration.textContent = durationMinutes + ":" + durationSeconds;
  284.          }
  285.        }
  286.        
  287.        // load the first track in the tracklist
  288.        loadTrack(track_index);
  289.    </script>
  290. </body>
  291. </html>
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!