Esta podría ser una pregunta específica, pero aquí vamos. Estoy tratando de implementar una forma de onda usando wavesurferjs y renderizando un elemento div sobre ella. Quiero usar la función de zoom de wavesurfer para acercar la forma de onda cuando estoy en el móvil. El problema aquí es cómo puedo hacer que el elemento div se represente sobre la forma de onda ampliada, receptiva y desplazable de la misma manera que la forma de onda.

Lo que he probado:

Me las arreglé para hacer una solución alternativa en la que configuraría manualmente el ancho div de la forma de onda en lugar de usar zoom() pero no es tan limpio como usar la funcionalidad integrada.

Mi código

La configuración de wavesurfer

 const formWaveSurferConfig = (ref) => ({ container: ref, waveColor: "rgb(180,180,180)", barWidth: 3, barRadius: 3, // scrollParent: false, responsive:true, interact:false, fillParent: true, // autocenter: false, height: 130, cursorWidth: 0, normalize: true, partialRender: true, plugins: [ Cursor.create({ showTime: true, opacity: 1, width: "1px", customShowTimeStyle: { "background-color": "#000", color: "#fff", padding: "2px", "font-size": "10px", } }) ], });

Creo la forma de onda y aquí están mis elementos:

 <div style={{ position: "relative", width: "90%", height: 160, margin: "auto", overflowX: "auto", paddingBottom: 10,}}> <div style={{ height:90, zIndex: 5, pointerEvents: "none", position: "absolute", top: 0, width: areaRef.current?.offsetWidth}} > <Chart data={chartData}/> </div> <div onClick={handleMouseClick} style={{ position: "absolute", bottom: 0, overflow: "auto hidden", width: "100%" }} id="waveform" ref={areaRef}> </div> </div> <Button color="primary" onClick={() => { setIsZoomed(!isZoomed); wavesurfer.current?.zoom(isZoomed? 1 : 40); }}> {!isZoomed ? "+" : "-"} </Button>

Notas sobre el problema

Como se indicó anteriormente, hice la solución en la que no usaría la función de zoom y, en su lugar, simplemente establecería el ancho de mis elementos en 300%, por ejemplo. He intentado modificar el css pero sin suerte. No olvidemos que la función de zoom también centra automáticamente la forma de onda en el progreso cuando se reproduce la pista. Eso significa que el elemento div también tiene que seguir ese centrado. Actualmente estoy tratando de verificar si el evento OnScroll se puede usar para hacer eso.