Draw vertical line on top of image - html

Question

I've written a small Soundcloud player for my blog. I just added the possibility to skip in time when clicking inside the waveform. Now I'd like to draw a line at the current position in the track and a text indicating the curren position in time.
How would I draw this on top of my waveform (which is an <img>-tag) and which elements would I use?

Answer 1

You can do something like this. Absolutely positioned element (it doesn't really matter what element you choose - divs seem to be the best logical choice for me) to appear on top of the image, and easily scrollable. You denote the bar position using the left property. For your image, it goes between 48px and 358px. See here:
function play() {
document.getElementById('pos').className = 'end';
}
#c {
position: relative;
}
#pos {
height: 50px;
width: 1px;
position: absolute;
left: 48px;
top: 1px;
background: red;
transition: left 5s linear;
}
#pos.end {
left: 358px;
}
<div id="c">
<div id="pos"></div>
<img src="http://i.stack.imgur.com/LUNV8.png" />
</div>
<button onclick="play()">Play</button>
And combining it with your existing waveform listener is also easy:
var pos = document.getElementById('pos');
var wave = document.getElementById('wave');
wave.addEventListener('click', function(e) {
if (e.offsetX < 48)
return;
pos.style.left = e.offsetX + 'px';
});
#c {
position: relative;
}
#pos {
height: 50px;
width: 1px;
position: absolute;
left: 48px;
top: 1px;
background: red;
}
<div id="c">
<div id="pos"></div>
<img id="wave" src="http://i.stack.imgur.com/LUNV8.png" />
</div>