Tengo esta instancia de forma de waveform wavesurfer.js y es hermosa y fina:
const wavesurfer = WaveSurfer.create({ container: document.querySelector(`#waveform`), backend: 'MediaElement', waveColor: '#525054', progressColor: '#eb7100', cursorColor: 'transparent', height: 450, fillParent: true, minPxPerSec: 100, hideScrollbar: true, }); wavesurfer.load(`https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3`); .container { width: 1536px; height: 864px; text-align: center; position: relative; left: 50%; transform-origin: center center; z-index: 1; /*The line below causes the error...*/ transform: translate(-50%, -66.5px) scale(0.846065); } <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.4/wavesurfer.min.js" integrity="sha512-mhqErQ0f2UqnbsjgKpM96XfxVjVMnXpszEXKmnJk8467vR8h0MpiPauil8TKi5F5DldQGqNUO/XTyWbQku22LQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="container"> <div id="waveform" class="waveform"></div> </div>Ahora, haga clic en la ola (espere hasta que se cargue el audio). ¡Verá que el punto en el que hizo clic y el punto donde la ola detecta su clic son diferentes!
Descubrí que el problema se debe a la scaling del contenedor aquí:
.container { ... z-index: 1; /*The line below causes the error...*/ transform: translate(-50%, -66.5px) scale(0.846065); }¿Cómo podemos solucionar este problema?
Nota 1: no agregué una etiqueta wavesurfer.js porque no es un problema de la biblioteca, es un problema de css y también puede resolverse con javascript o jquery...
Nota 2: necesito la escala del contenedor y, por supuesto, los valores pueden ser diferentes ...
Aquí hay una reproducción del problema en codepen: https://codepen.io/pixy-dixy/pen/YzQONBY