I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own rectangle over one of these wavesurfer objects and then control its position using Javascript.
One issue I am encountering is avoiding the use of absolute coordinates with respect to the browser window. Instead, I aim to utilize relative coordinates based on the position within the wavesurfer object itself. Moreover, despite placing the rectangle within the same div container as the waveform, it is not overlaying the waveform as desired.
Although this may seem like a basic question regarding overlaying shapes on top of visuals such as pictures, I have been unable to find a suitable solution that works for the specific waveform objects in my project.
var wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: "darkorange",
progressColor: "skyblue",
interact: false
});
wavesurfer.load("https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");
var wavesurfer2 = WaveSurfer.create({
container: "#waveform2",
waveColor: "silver",
progressColor: "gainsboro",
interact: false
});
wavesurfer2.load( "https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3"
);<body>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/wavesurfer.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>
<div class="container" style="display: flex">
<div id="waveform" style="width:60%"></div>
</div>
<div class="container" style="display: flex">
<div id="waveform2" style="width:60%"></div>
</div>
<div>
<input type="range" id="slider" name="range_slider" min="0" max="11">
<label for="range_slider">Range Slider</label>
</div>
<div id="selector">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="50" height="100" stroke="black" stroke-width="5" fill="none" />
</svg>
</div>