Estoy trabajando con una biblioteca de visualización/reproducción de forma de onda llamada wavesurfer . En el fragmento que creé a continuación, tengo dos objetos wavesurfer renderizados y colocados dentro de elementos div de tipo "contenedor". Me gustaría colocar mi propio rectángulo sobre uno de estos objetos wavesurfer y controlar su posición usando javascript.
Mi problema es que no quiero usar coordenadas absolutas referenciadas para la ventana del navegador. Quiero usar coordenadas relativas basadas en la posición dentro del objeto wavesurfer. Además, como puede ver, el rectángulo no se superpone a la forma de onda, incluso si lo coloco dentro del mismo contenedor div.
Soy nuevo en javascript y me doy cuenta de que esta podría ser una pregunta muy básica sobre la superposición de formas sobre cosas como imágenes, pero hasta ahora no he podido encontrar una solución que funcione para los objetos de forma de onda con los que estoy trabajando.
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>Puede usar getBoundingClientRect para obtener la altura de desplazamiento y el desplazamiento a la izquierda del elemento deseado, en función de estos valores, puede colocar fácilmente cualquier elemento en relación con estos valores.
Como se describe aquí: https://stackoverflow.com/a/52477551/7457356
Un enfoque ligeramente diferente sería colocar un pseudo elemento en cada forma de onda (o en la forma de onda que desee).
Esto se puede posicionar en términos de %, siendo el % relativo al ancho de la forma de onda.
Este fragmento dibuja el rectángulo colocando un borde alrededor del pseudo elemento, pero podría tener una imagen como fondo si se requiere una forma menos simple.
Se introduce una forma de onda de clase para simplificar el estilo de estos elementos.
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"); .waveform { position: relative; } .waveform::before { content: ''; width: 20px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: solid 5px; left: var(--left); } #waveform { --left: 60%; } #waveform2 { --left: 8%; } <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" class="waveform" style="width:60%"></div> </div> <div class="container" style="display: flex"> <div id="waveform2" class="waveform" 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>Las variables CSS se han utilizado para establecer la distancia a lo largo de una forma de onda en la que se ubicará el selector. Para cualquier elemento de forma de onda en particular, esto se puede cambiar configurando la propiedad style --left, por ejemplo, element.style.setProperty('--left', '60%');