He pasado lo que tienes a jsfiddlle para poder testearlo rápidamente.
http://jsfiddle.net/8cpv3q08/1/
En el post anterior, a parte de pedirte que pusieras tus avances te di pistas de como resolver ciertos problemas que ya intuía que te pasarían.
Canvas pinta encima de los dibujos que has pintado anteriormente. Por eso la barra de progreso tiene ese comporatamiento tan extraño. Pues si pintas un rectángulo pequeño dentro de otro más grande del mismo color, no producirá ningún efecto. Por tanto, antes de dibujar un nuevo rectangulo en el canvas hay que limpiar la pantalla con el método
clearRect
Si miramos aquí:
Al clicar rebobinar llamas a una función
barra que no existe en javascript.
La variable progreso debería guardar el número de pixeles en la que está la barra. Y el número de píxeles debería estar en relación directa con el porcentaje de progreso de la canción y el ancho total de la barra. De momento sólo le vas sumando un píxel cada vez que se ejecuta la función Barra().
Cuando clicas al botón de stop llamas a la función
restart. En esta función llamas a
contexto.clear(0, 0, progreso++, 30); . No sé de donde has sacado que existe el método
clear. A parte, ¿la variable prograso no debería reinicializarse a 0?
PD.: Intenta separar mentalmente que código utilizas para ejecutar la animación de barra de progreso de canvas y qué otro código utilizas para parar/ejecutar/avanzar/retroceder el sonido. Porque por el código que escribes parece que tienes un buen batiburrillo mental.
Un saludo!