JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.2/rxjs.umd.js"></script>
<button id="playBtn">
      play
</button>

<button id="pauseBtn">
      Stop
</button>

CSS

.video_wrapper {
  border-radius: 166px;
  width: 166px;
  height: 166px;
  overflow: hidden;
  position: absolute;
  top: 12px;
  left: 14px;
  box-shadow: 0px 1px 8px;
}

.playPause {
  top: 48px;
  left: 48px;
  border-radius: 58px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 1000;
  box-shadow: 0px 1px 18px;
  opacity: .4;
  border: 5px solid #fff;
  display: none;
}

.playPause .fa-play {
  top: 13px;
  left: 18px;
  font-size: 36px;
  color: #fff;
  position: absolute;
}

.demo {
  /*.u-absoluteCenter();
    .u-flexCenter();
    flex-direction: column;
    
    :first-child {
        margin-bottom: 20px;
    }*/
  position: relative;
}

.progress {
  transform: rotate(-90deg);
}

#control {
  display: none;
}

.progress_meter,
.progress_value {
  fill: none;
}

.progress_meter {
  stroke: #e6e6e6;
}

.progress_value {
  stroke: #f77a52;
  /*stroke-linecap: round;*/
}

JavaScript

var sounds = [{
    id: 1,
    name: "sound 1",
    path: "https://www.hibou-music.fr/MP3FILES/MELODIC/15_SECONDS/MP3_192/A_PLACE_TO_DREAM_y_bourdin_HIBOU537_LC06881_J2.mp3"
  },
  {
    id: 2,
    name: "sound 2",
    path: "https://www.hibou-music.fr/MP3FILES/MELODIC/15_SECONDS/MP3_192/BEAUTIFUL_FOR_EVER_A_g_shess_HIB467_LC06881_J1.mp3"
  },
  {
    id: 3,
    name: "sound 3",
    path: "https://www.hibou-music.fr/MP3FILES/MELODIC/15_SECONDS/MP3_192/BORN_TO_LOVE_B_g_gesina_HIBOU537_LC06881_J1.mp3"
  }
];
var player = new Audio();

function playSound(sound) {
  if (sound.path !== player.currentSrc) {
    player.src = sound.path;
  }

  if (player.paused) {
    player.play();
  } else {
    player.pause();
  }

  // play next sound
  player.addEventListener('ended', function() {
    var currentIndex = sounds.findIndex(elemt => elemt.id === sound.id);
    var soundToPlayObj = sounds[currentIndex + 1];
    if (soundToPlayObj !== undefined) {
      playSound(soundToPlayObj);
      console.log(soundToPlayObj.name);
    }
  });
}

var song = {
  id: 1,
  name: "sound 1",
  path: "https://www.hibou-music.fr/MP3FILES/MELODIC/15_SECONDS/MP3_192/A_PLACE_TO_DREAM_y_bourdin_HIBOU537_LC06881_J2.mp3"
};

playSound(song);