If you want to achieve a scrolling effect on top of an image, you can use an absolutely positioned element, like a div, and set its position using the left property. For example, in this code snippet, the bar moves between 48px and 358px:
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="https://i.sstatic.net/LUNV8.png" />
</div>
<button onclick="play()">Play</button>
You can easily integrate this with your waveform listener by adding a simple function that updates the position based on the click event:
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="https://i.sstatic.net/LUNV8.png" />
</div>