Advertisement
Guest User

Playlist music player

a guest
May 1st, 2023
609
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.61 KB | None | 1 0
  1. <link rel="stylesheet"
  2. href=
  3. "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  4. <style>
  5. .musicplayer {
  6. border: 1px solid black;
  7. margin-top: 15px;
  8. }
  9.  
  10. .songtitle {
  11. padding: 5px;
  12. border-bottom: 1px solid black;
  13. height: 25px;
  14. display: flex;
  15. align-items: center;
  16. background-color: white;
  17. }
  18.  
  19. .controls{
  20. font-size:20px !important;
  21. color: black;
  22. background-color: white;
  23. text-align: center;
  24. width: 100%;
  25. height: 25px;
  26. }
  27. i.fas:hover{
  28. cursor:help;
  29. }
  30.  
  31. .controls td{
  32. padding: 5px;
  33. }
  34. </style>
  35. <div class="musicplayer">
  36. <div>
  37. <marquee scrollamount="15" class="songtitle"></marquee>
  38. </div>
  39.  
  40. <table class="controls">
  41. <tr>
  42. <td>
  43. <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
  44. </td>
  45. <td>
  46. <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
  47. </td>
  48. <td>
  49. <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
  50. </td>
  51. </tr>
  52. </table>
  53.  
  54. <audio id="music" src=""></audio>
  55. </div>
  56.  
  57. <script>
  58. let track_name = document.querySelector(".songtitle");
  59.  
  60. let playpause_btn = document.querySelector(".playpause-track");
  61. let next_btn = document.querySelector(".next-track");
  62. let prev_btn = document.querySelector(".prev-track");
  63.  
  64. let track_index = 0;
  65. let isPlaying = false;
  66.  
  67. // Create new audio element
  68. let curr_track = document.getElementById("music");
  69.  
  70. // Define the tracks that have to be played
  71. let track_list = [
  72. {
  73. name:"artist and song name",
  74. path:""
  75. },
  76. {
  77. name:"artist and song name",
  78. path:""
  79. },
  80. {
  81. name:"artist and song name",
  82. path:""
  83. },
  84. {
  85. name:"artist and song name",
  86. path:""
  87. },
  88. ];
  89.  
  90. function loadTrack(track_index) {
  91. // Load a new track
  92. curr_track.src = track_list[track_index].path;
  93. curr_track.load();
  94.  
  95. // Update details of the track
  96. track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;
  97.  
  98.  
  99. // Move to the next track if the current one finishes playing
  100. curr_track.addEventListener("ended", nextTrack);
  101.  
  102. }
  103.  
  104. function playpauseTrack() {
  105. if (!isPlaying) playTrack();
  106. else pauseTrack();
  107. }
  108.  
  109. function playTrack() {
  110. curr_track.play();
  111. isPlaying = true;
  112.  
  113. // Replace icon with the pause icon
  114. playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
  115. }
  116.  
  117. function pauseTrack() {
  118. curr_track.pause();
  119. isPlaying = false;
  120.  
  121. // Replace icon with the play icon
  122. playpause_btn.innerHTML = '<i class="fas fa-play"></i>';
  123. }
  124.  
  125. function nextTrack() {
  126. if (track_index < track_list.length - 1)
  127. track_index += 1;
  128. else track_index = 0;
  129. loadTrack(track_index);
  130. playTrack();
  131. }
  132.  
  133. function prevTrack() {
  134. if (track_index > 0)
  135. track_index -= 1;
  136. else track_index = track_list.length;
  137. loadTrack(track_index);
  138. playTrack();
  139. }
  140.  
  141. // Load the first track in the tracklist
  142. loadTrack(track_index);
  143. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement