JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="audio2"	>

<source src="http://ia802300.us.archive.org/22/items/CanonInD_261/CanoninD.mp3" type="audio/mp3" />

</audio>
<canvas id="pantalla" width="500" height="30" style="border: 1px solid green">

</canvas>
<div>	
<!--para conseguir ir hacia atras salto le restamos 10, y para adelante le sumamos 10 -->
<button id="rew" onclick="barra(-10)">&lt;&lt;</button>
<button id="play" onclick="pauseplay()">&gt;</button>
<button id="fastFwd" onclick="barra(10)">&gt;&gt;</button>
<button id="restar" onclick="restart">&lhblk;</button>
</div>

CSS

canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;

}
div {
width:500px;
height:60px;
margin: 10px auto;

}

JavaScript

var canvas;
var contexto;
var progreso;

window.onload = function(){ 

  //cargamos el elemento canvas
  canvas = document.getElementById("pantalla");

  //una vez cargado el elemento, le digo en que contexto trabajaremos, en este caso 2d
  contexto = canvas.getContext("2d");
}
//barra de progresos dentro del canvas
function Barra()
{
  contexto.fillRect(0, 0, progreso++, 30);
}
// cuando activamos play y pause , combina el boton 
function pauseplay() {

  var musica = document.getElementById("audio2");
  var button = document.getElementById("play");
  if (musica.paused) {
    musica.play();
    button.textContent = "||";
    progreso = musica.currentTime;
    setInterval("Barra()", 500);
  } else {
    musica.pause();
    button.textContent = ">";
    progreso=0;
  }
}

function restart() {
  var musica = document.getElementById("audio2");
  //hay que borrar la barra de progreso
  contexto.clear(0, 0, progreso++, 30);
}

function salto(value) {
  //para adelantar o atrasar la barra 
  var musica = document.getElementById("audio2");
  musica.currentTime += value;
}