JSFiddle - React, Tailwind, and code Playground

by Stefano Bertoli

HTML

<button disabled>play</button><span></span>

JavaScript

var audio = new Audio();
var button = document.querySelector('button');
audio.src = "http://www.sandropaganotti.com/wp-content/goodies/misc/thunder.mp3";
//per autoplay
audio.play();document.querySelector('button').
        textContent = "pause";
//
audio.addEventListener('canplaythrough', function(){
    button.removeAttribute('disabled');                           
}, false);

button.addEventListener('click', function(evt){
    if(audio.paused){
        evt.target.textContent = 'pause';
        audio.play();
    }else{
        evt.target.textContent = 'play';
        audio.pause();
    }
}, false);
setInterval(function(){
    if(audio.played.length > 0 && !audio.paused){
        document.querySelector('span').
        textContent = Math.ceil(audio.played.end(0));
    }
}, 1000);