JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="simplePlayer" id="player1">
  <div class="playbtn">Play</div>
  <div class="plyd">Time</div>
</div>

CSS

.simplePlayer{
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

JavaScript

$.fn.MusicPlayer = function(options) {
  var settings = $.extend({
    // These are the defaults
    track_URL: "music player"
  }, options);
  audio = new Audio(); //audio.volume = 0;
  audio.src = "http://mpc.mediacp.eu:9202/stream?sid=1";
  audio.crossOrigin = 'anonymous'
  thisObj = this; // Current instance of the plugin

  this.on("click tap", ".playbtn", function() {
    if (audio.paused) {
      audio.play();
      $(this).text("Playing");
    } else {
      audio.pause();
      $(this).text("Paused");
    }
  });

  //Statuses Evnts
  $(audio).on("playing", function() {

  });
  $(audio).on("timeupdate", function() {
    var cur = audio.currentTime * (100 / audio.duration);
    $(".plyd", thisObj).css("width", cur + "%");
    $(".plyd", thisObj).text("Time:  " + audio.currentTime)
  });

  this.each(function() {
    audio.src = settings.track_URL;
    audio.crossOrigin = 'anonymous'
    //audio.play();
  })
}

$("#player1").MusicPlayer({
  //track_URL: "https://ice-sov.musicradio.com/HeartLondonMP3",
  //track_URL: "http://80sbeats.cyberbeats.net:8000/stream?icy=http",
  //track_URL: "kastproxy-us.herokuapp.com/http://80sbeats.cyberbeats.net:8000/stream?icy=http",
  track_URL: "http://mpc.mediacp.eu:9202/stream?sid=1"
});