Запустить воспроизведение и отснять скриншот графика. Потом его использовать в этом коде:
<style>
body{
margin: 0;
padding: 0;
}
.myclass{
position: absolute;
top: 100px;
}
</style>
<br />
<audio id=audio src="http://tolmatux.strana.de/audio/razminka.mp3" controls></audio>
<br /><br />
<img id=myimg class=myclass src="http://opan.strana.de/wavesurfer/wave.jpg" /> <!-- график -->
<div id=mydiv class=myclass></div>
<script>
let myimgStyles = window.getComputedStyle(myimg),
iw = parseInt(myimgStyles.getPropertyValue('width'));
mydiv.style.height = myimgStyles.getPropertyValue('height');
mydiv.style.background = "rgba(0, 100, 0, 0.3)";
audio.ontimeupdate = function(){mydiv.style.width = audio.currentTime / audio.duration * iw + "px"};
myimg.onclick = mydiv.onclick = function(e){
mydiv.style.width = e.pageX + "px";
audio.currentTime = e.pageX / iw * audio.duration;
audio.play();
}
</script>
живой пример
Правда, цветовая схема пока получается другая - вместо тонкого курсора широкая полоса, правый край которой соответствует позиции курсора.
