I have two pngs, one white and the other red.

<img class="rangeHorizontal" id="seek" src="http://i.imgur.com/hRHH9VO.png"> <img id="seekFill" src="http://i.imgur.com/WoJggN0.png">

When the song it not playing it should be white, and when the song is going it should fill red as the song progresses, and also when scrubbed backwards and forwards respectively.

I have been able to muddle through most of the play functionality except the Canvas portion.

Currently the two pngs are overlays on top of each other and when the song plays the whole red png overlays on top, .. instead of just showing a portion,.. its pretty hard to explain but I have a fiddle so things become clearer.

https://jsfiddle.net/tallgirltaadaa/q9qgyob0/

The desired result would like this player, it also uses a two png method:

http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/full_screen_preview/4525354?ref=hkeyjun

If anyone could help me out a bit I would love it.. I have been masking and trying to use canvas all morning with no luck.