fork download
copy 
  1.  const wrapper = document.querySelector(".wrapper"),
  2.  musicImg = wrapper.querySelector(".img-area img"),
  3.  musicName = wrapper.querySelector(".song-details .name"),
  4.  musicArtist = wrapper.querySelector(".song-details .artist"),
  5.  mainAudio = wrapper.querySelector("#main-audio"),
  6.  playPauseBtn = wrapper.querySelector(".play-pause"),
  7.  prevBtn = wrapper.querySelector("#prev"),
  8.  nextBtn = wrapper.querySelector("#next"),
  9.  progressArea = wrapper.querySelector(".progress-area"),
  10.  progressBar = wrapper.querySelector(".progress-bar"),
  11.  musicList = wrapper.querySelector(".music-list"),
  12.  showMoreBtn = musicList.querySelector("#more-music"),
  13.  hideMusicBtn = musicList.querySelector("#close");
  14.  
  15. let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);
  16.  
  17. window.addEventListener("load", ()=>{
  18.  loadMusic(musicIndex);
  19. })
  20.  
  21. //load music function
  22. function loadMusic(indexNumb){
  23.  musicName.innerText = allMusic[indexNumb - 1].name;
  24.  musicArtist.innerText = allMusic[indexNumb - 1].artist;
  25.  musicImg.src = `images/${allMusic[indexNumb - 1].img}.jpg`;
  26.  mainAudio.src = `songs/${allMusic[indexNumb - 1].src}.mp3`;
  27. }
  28.  
  29. function playMusic(){
  30.  wrapper.classList.add("paused");
  31.  playPauseBtn.querySelector("i").innerText = "pause";
  32.  mainAudio.play();
  33. }
  34.  
  35. function pauseMusic(){
  36.  wrapper.classList.remove("paused");
  37.  playPauseBtn.querySelector("i").innerText = "play_arrow";
  38.  mainAudio.pause();
  39. }
  40.  
  41. function nextMusic(){
  42.  musicIndex++;
  43.  musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
  44.  loadMusic(musicIndex);
  45.  playMusic();
  46.  playingNow();
  47. }
  48.  
  49. function prevMusic(){
  50.  musicIndex--;
  51.  musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
  52.  loadMusic(musicIndex);
  53.  playMusic();
  54.  playingNow();
  55. }
  56.  
  57. playPauseBtn.addEventListener("click", ()=>{
  58.  const isMusicPaused = wrapper.classList.contains("paused");
  59.  
  60.  isMusicPaused ? pauseMusic() : playMusic();
  61.  playingNow();
  62. });
  63.  
  64.  
  65. nextBtn.addEventListener("click", ()=>{
  66.  nextMusic();
  67. });
  68.  
  69. prevBtn.addEventListener("click", ()=>{
  70.  prevMusic();
  71. });
  72.  
  73.  mainAudio.addEventListener("timeupdate", (e)=>{
  74.  const currentTime = e.target.currentTime;
  75.  const duration = e.target.duration;
  76.  let progressWidth = (currentTime / duration) * 100;
  77.  progressBar.style.width = `${progressWidth}%`;
  78.  let musicCurrentTime = wrapper.querySelector(".current"),
  79.  musicDuration = wrapper.querySelector(".duration");
  80.  
  81.  mainAudio.addEventListener("loadeddata", ()=>{
  82.  let audioDuration = mainAudio.duration;
  83.  let totalMin = Math.floor(audioDuration / 60);
  84.  let totalSec = Math.floor(audioDuration % 60);
  85.  if(totalSec < 10){
  86.  totalSec = `0${totalSec}`;
  87. }
  88.  musicDuration.innerText = `${totalMin}:${totalSec}`;
  89. });
  90.  
  91.  let currentMin = Math.floor(currentTime / 60);
  92.  let currentSec = Math.floor(currentTime % 60);
  93.  if(currentSec < 10){
  94.  currentSec = `0${currentSec}`;
  95. }
  96.  musicCurrentTime.innerText = `${currentMin}:${currentSec}`;
  97. });
  98.  
  99. progressArea.addEventListener("click", (e)=>{
  100.  let progressWidthval = progressArea.clientWidth;
  101.  let clickedOffSetX = e.offsetX;
  102.  let songDuration = mainAudio.duration;
  103.  
  104.  mainAudio.currentTime = (clickedOffSetX / progressWidthval) * songDuration;
  105.  
  106.  playMusic();
  107. });
  108.  
  109.  const repeatBtn = wrapper.querySelector("#repeat-plist");
  110.  repeatBtn.addEventListener("click", ()=>{
  111.  
  112.  let getText = repeatBtn.innerText;
  113.  
  114.  switch(getText){
  115.  case "repeat":
  116.  repeatBtn.innerText = "repeat_one";
  117.  repeatBtn.setAttribute("title", "song looped");
  118.  break;
  119.  case "repeat_one":
  120.  repeatBtn.innerText = "shuffle";
  121.  repeatBtn.setAttribute("title", "Playback shuffle");
  122.  break;
  123.  case "shuffle":
  124.  repeatBtn.innerText = "repeat";
  125.  repeatBtn.setAttribute("title", "Playlist looped");
  126.  break;
  127. }
  128. });
  129.  
  130.  mainAudio.addEventListener("ended", ()=>{
  131.  let getText = repeatBtn.innerText;
  132.  
  133.  switch(getText){
  134.  case "repeat":
  135.  nextMusic();
  136.  break;
  137.  case "repeat_one":
  138.  mainAudio.currentTime = 0;
  139.  loadMusic(musicIndex);
  140.  playMusic();
  141.  break;
  142.  case "shuffle":
  143.  
  144.  let randIndex = Math.floor((Math.random() * allMusic.length) + 1);
  145.  do{
  146.  randIndex = Math.floor((Math.random() * allMusic.length) + 1);
  147. }while(musicIndex == randIndex);
  148.  musicIndex = randIndex;
  149.  loadMusic(musicIndex);
  150.  playMusic();
  151.  playingNow();
  152.  break;
  153. }
  154. });
  155.  
  156.  showMoreBtn.addEventListener("click", ()=>{
  157.  musicList.classList.toggle("show");
  158. });
  159.  
  160.  hideMusicBtn.addEventListener("click", ()=>{
  161.  showMoreBtn.click();
  162. });
  163.  
  164. const ulTag = wrapper.querySelector("ul");
  165.  
  166. for(let i = 0; i < allMusic.length; i++){
  167.  let liTag = `<li li-index="${i+1}">
  168.                       <div class="row">
  169. <span>${allMusic[i].name}</span>
  170. <p>${allMusic[i].artist}</p>
  171. </div>
  172. <audio class="${allMusic[i].src}" src="songs/${allMusic[i].src}.mp3"></audio>
  173. <span id="${allMusic[i].src}" class="audio-duration">0:00</span>
  174. </li>`;
  175.  
  176. ulTag.insertAdjacentHTML("beforeend", liTag);
  177.  
  178. let liAudioDuration = ulTag.querySelector(`#${allMusic[i].src}`);
  179.  
  180. let liAudioTag = ulTag.querySelector(`.${allMusic[i].src}`);
  181.  
  182. liAudioTag.addEventListener("loadeddata", ()=>{
  183.  let audioDuration = liAudioTag.duration;
  184.  let totalMin = Math.floor(audioDuration / 60);
  185.  let totalSec = Math.floor(audioDuration % 60);
  186.  if(totalSec < 10){
  187.  totalSec = `0${totalSec}`;
  188. }
  189.  liAudioDuration.innerText = `${totalMin}:${totalSec}`;
  190.  liAudioDuration.setAttribute("t-duration", `${totalMin}:${totalSec}`);
  191. });
  192. }
  193.  
  194.  const allLiTags = ulTag.querySelectorAll("li");
  195.  function playingNow(){
  196.  for(let j = 0; j < allLiTags.length; j++){
  197.  let audioTag = allLiTags[j].querySelector(".audio-duration");
  198.  if(allLiTags[j].classList.contains("playing")){
  199.  allLiTags[j].classList.remove("playing");
  200.  let adDuration = audioTag.getAttribute("t-duration");
  201.  audioTag.innerText = adDuration;
  202. }
  203.  if(allLiTags[j].getAttribute("li-index") == musicIndex){
  204.  allLiTags[j].classList.add("playing");
  205.  audioTag.innerText = "Playing";
  206. }
  207.  allLiTags[j].setAttribute("onclick", "clicked(this)");
  208. }
  209. }
  210.  
  211. function clicked(element){
  212.  let getLiIndex = element.getAttribute("li-index");
  213.  musicIndex = getLiIndex;
  214.  loadMusic(musicIndex);
  215.  playMusic();
  216.  
  217. }
Success #stdin #stdout 0.02s 25828KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
 const wrapper = document.querySelector(".wrapper"),
 musicImg = wrapper.querySelector(".img-area img"),
 musicName = wrapper.querySelector(".song-details .name"),
 musicArtist = wrapper.querySelector(".song-details .artist"),
 mainAudio = wrapper.querySelector("#main-audio"),
 playPauseBtn = wrapper.querySelector(".play-pause"),
 prevBtn = wrapper.querySelector("#prev"),
 nextBtn = wrapper.querySelector("#next"),
 progressArea = wrapper.querySelector(".progress-area"),
 progressBar = wrapper.querySelector(".progress-bar"),
 musicList = wrapper.querySelector(".music-list"),
 showMoreBtn = musicList.querySelector("#more-music"),
 hideMusicBtn = musicList.querySelector("#close");

let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);

window.addEventListener("load", ()=>{
 loadMusic(musicIndex);
})

//load music function
function loadMusic(indexNumb){
 musicName.innerText = allMusic[indexNumb - 1].name;
 musicArtist.innerText = allMusic[indexNumb - 1].artist;
 musicImg.src = `images/${allMusic[indexNumb - 1].img}.jpg`;
 mainAudio.src = `songs/${allMusic[indexNumb - 1].src}.mp3`;
}

function playMusic(){
 wrapper.classList.add("paused");
 playPauseBtn.querySelector("i").innerText = "pause";
 mainAudio.play();
}

function pauseMusic(){
 wrapper.classList.remove("paused");
 playPauseBtn.querySelector("i").innerText = "play_arrow";
 mainAudio.pause();
}

function nextMusic(){
 musicIndex++;
 musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
 loadMusic(musicIndex);
 playMusic();
 playingNow();
}

function prevMusic(){
 musicIndex--;
 musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
 loadMusic(musicIndex);
 playMusic();
 playingNow();
}

playPauseBtn.addEventListener("click", ()=>{
 const isMusicPaused = wrapper.classList.contains("paused");

 isMusicPaused ? pauseMusic() : playMusic();
 playingNow();
});


nextBtn.addEventListener("click", ()=>{
 nextMusic();
});

prevBtn.addEventListener("click", ()=>{
 prevMusic();
});

 mainAudio.addEventListener("timeupdate", (e)=>{
 const currentTime = e.target.currentTime;
 const duration = e.target.duration;
 let progressWidth = (currentTime / duration) * 100;
 progressBar.style.width = `${progressWidth}%`;
 let musicCurrentTime = wrapper.querySelector(".current"),
 musicDuration = wrapper.querySelector(".duration");

 mainAudio.addEventListener("loadeddata", ()=>{
 let audioDuration = mainAudio.duration;
 let totalMin = Math.floor(audioDuration / 60);
 let totalSec = Math.floor(audioDuration % 60);
 if(totalSec < 10){
 totalSec = `0${totalSec}`;
}
 musicDuration.innerText = `${totalMin}:${totalSec}`;
});

 let currentMin = Math.floor(currentTime / 60);
 let currentSec = Math.floor(currentTime % 60);
 if(currentSec < 10){
 currentSec = `0${currentSec}`;
}
 musicCurrentTime.innerText = `${currentMin}:${currentSec}`;
});

progressArea.addEventListener("click", (e)=>{
 let progressWidthval = progressArea.clientWidth;
 let clickedOffSetX = e.offsetX;
 let songDuration = mainAudio.duration;

 mainAudio.currentTime = (clickedOffSetX / progressWidthval) * songDuration;

 playMusic();
});

 const repeatBtn = wrapper.querySelector("#repeat-plist");
 repeatBtn.addEventListener("click", ()=>{

 let getText = repeatBtn.innerText;

 switch(getText){
 case "repeat":
 repeatBtn.innerText = "repeat_one";
 repeatBtn.setAttribute("title", "song looped");
 break;
 case "repeat_one":
 repeatBtn.innerText = "shuffle";
 repeatBtn.setAttribute("title", "Playback shuffle");
 break;
 case "shuffle":
 repeatBtn.innerText = "repeat";
 repeatBtn.setAttribute("title", "Playlist looped");
 break;
}
});

 mainAudio.addEventListener("ended", ()=>{
 let getText = repeatBtn.innerText;

 switch(getText){
 case "repeat":
 nextMusic();
 break;
 case "repeat_one":
 mainAudio.currentTime = 0;
 loadMusic(musicIndex);
 playMusic();
 break;
 case "shuffle":

 let randIndex = Math.floor((Math.random() * allMusic.length) + 1);
 do{
 randIndex = Math.floor((Math.random() * allMusic.length) + 1);
}while(musicIndex == randIndex);
 musicIndex = randIndex;
 loadMusic(musicIndex);
 playMusic();
 playingNow();
 break;
}
});

 showMoreBtn.addEventListener("click", ()=>{
 musicList.classList.toggle("show");
});

 hideMusicBtn.addEventListener("click", ()=>{
 showMoreBtn.click();
});

const ulTag = wrapper.querySelector("ul");

for(let i = 0; i < allMusic.length; i++){
 let liTag = `<li li-index="${i+1}">
                      <div class="row">
<span>${allMusic[i].name}</span>
<p>${allMusic[i].artist}</p>
</div>
<audio class="${allMusic[i].src}" src="songs/${allMusic[i].src}.mp3"></audio>
<span id="${allMusic[i].src}" class="audio-duration">0:00</span>
</li>`;

ulTag.insertAdjacentHTML("beforeend", liTag);

let liAudioDuration = ulTag.querySelector(`#${allMusic[i].src}`);

let liAudioTag = ulTag.querySelector(`.${allMusic[i].src}`);

liAudioTag.addEventListener("loadeddata", ()=>{
 let audioDuration = liAudioTag.duration;
 let totalMin = Math.floor(audioDuration / 60);
 let totalSec = Math.floor(audioDuration % 60);
 if(totalSec < 10){
 totalSec = `0${totalSec}`;
}
 liAudioDuration.innerText = `${totalMin}:${totalSec}`;
 liAudioDuration.setAttribute("t-duration", `${totalMin}:${totalSec}`);
});
}

 const allLiTags = ulTag.querySelectorAll("li");
 function playingNow(){
 for(let j = 0; j < allLiTags.length; j++){
 let audioTag = allLiTags[j].querySelector(".audio-duration");
 if(allLiTags[j].classList.contains("playing")){
 allLiTags[j].classList.remove("playing");
 let adDuration = audioTag.getAttribute("t-duration");
 audioTag.innerText = adDuration;
}
 if(allLiTags[j].getAttribute("li-index") == musicIndex){
 allLiTags[j].classList.add("playing");
 audioTag.innerText = "Playing";
}
 allLiTags[j].setAttribute("onclick", "clicked(this)");
}
}

function clicked(element){
 let getLiIndex = element.getAttribute("li-index");
 musicIndex = getLiIndex;
 loadMusic(musicIndex);
 playMusic();

}
https://ideone.com/Uy8DZ8
language:
PHP (php 7.3.5)
created:
1 day ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!