JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<div id="player"></div>
<button id="play">Play</button>
<button id="stop">Stop</button>

JavaScript

var url = 'https://cs6-2v4.vk-cdn.net/p6/dd778325acc5df.mp3';

  function E(id) {
      this.el = typeof id == 'string' ? document.getElementById(id) : id;
  }

  E.prototype.on = function(type, callback) {
   this.el.addEventListener(type, callback, false);
   return this;
  }
  
  var play   = new E('play')
   ,  stop   = new E('stop')
   ,  audio  = new E(new Audio(url))
   ,  player = new E('player');

     audio.on('canplay', function(e) {
      console.log('canplay')
     })
     .on('pause', function(e) {
       console.log('paused'); 
     })
     .on('timeupdate', function(event) {
        player.el.innerHTML = parseTime(this.currentTime);
     });

      play.on('click', function(e) {
       audio.el.currentTime = 1;
       audio.el.play();
     });

      stop.on('click', function(e) {
        audio.el.pause();
     });

function parseTime(seconds) {
 var min = parseInt( seconds / 60 );
 var sec = Math.floor(seconds % 60)
 return [ 
   min , (sec < 10 ? '0' : '') + sec 
  ].join(':');
}