JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<body>
  <div class="player">
   
   <img id="backImage" src="http://findicons.com/files/icons/141/toolbar_icons_6_by_ruby_softwar/128/rewind.png"  height="42" width="42">
   
    <img id="swapImage" src="http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png"  height="42" width="42">
    
     <img id="nextImage" src="http://findicons.com/files/icons/141/toolbar_icons_6_by_ruby_softwar/128/forward.png"  height="42" width="42">
     
      <img id="stopImage" src="http://findicons.com/files/icons/719/crystal_clear_actions/64/player_stop.png"  height="42" width="42">
     </div>
<div class="playlist">
   <div class="song" url="https://www.freesound.org/data/previews/353/353579_5876986-lq.mp3">
   https://www.freesound.org/people/tarane468/sounds/353579/
   </div>
    <div class="song" url="https://www.freesound.org/data/previews/353/353432_392324-lq.mp3">
    https://www.freesound.org/people/blimp66/sounds/353432/
   </div>
   <div class="song" url="https://www.freesound.org/data/previews/26/26722_34346-lq.mp3">
    https://www.freesound.org/people/Leady/sounds/26722/
   </div>
  </div>
</body>

CSS

.playing {
  background-color: green;
}

JavaScript

var imageTracker = 'playImage';
//set events handlers for on click
document.getElementById("swapImage").onclick = function() {
	swapImage();
	playPause();
};
document.getElementById("stopImage").onclick = function() {
	stop();
}
document.getElementById("nextImage").onclick = function() {
	forward();
}
document.getElementById("backImage").onclick = function() {
	backward();
}

//hadlers
 var swapImage = function() {
  var image = document.getElementById('swapImage');
  if (imageTracker == 'playImage') {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png';
    imageTracker = 'stopImage';
  } else {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png';
    imageTracker = 'playImage';
  }
};

//playing flag 
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
 $(".song").each(function(){
 		var load = new  Audio($(this).attr("url"));
    load.load();
    load.addEventListener('ended',function(){
       forward();
    });
    audios.push(load);
 });
//active track
var activeTrack = 0;

    
var playPause = function() {
  if (musicTracker == 'noMusic') {
  	audios[activeTrack].play();
    musicTracker = 'playMusic';
  } else {
    audios[activeTrack].pause();
    musicTracker = 'noMusic';
  }
  showPlaying();
};

var stop = function() {
  if (musicTracker == 'playMusic') {
  	 audios[activeTrack].pause();
		 audios[activeTrack].currentTime = 0;
  	 audios[activeTrack].play();
  } else {
    audios[activeTrack].currentTime = 0;
  }
};

var forward = function(){
  function increment(){
  	 if (activeTrack < audios.length - 1)
     		activeTrack++;
     else activeTrack = 0;
  }
	if (musicTracker == 'playMusic') {
  	 audios[activeTrack].pause();
		 //audios[activeTrack].currentTime = 0;
     increment();
  	 audios[activeTrack].play();
  } else {
    increment();
  }
  showPlaying();
};
console.log(activeTrack)
var backward = function(){
  function decrement(){
  	 if (activeTrack >...