Herramientas de audioAudio Native

Audio Native con Framer

Integra Audio Native en tus sitios web de Framer.

Sigue los pasos de la descripción general de Audio Native para empezar a usar Audio Native antes de continuar con esta guía.

1

Añade el script de Audio Native a tu página

Ve a tu página de Framer, inicia sesión y accede a la configuración de tu sitio. En el código de inserción de Audio Native, extrae la etiqueta <script> y pégala en el campo “End of <body> tag”.

Script de inserción 
    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
2

Añade un elemento Embed

En la página de tu blog de Framer, añade un elemento Embed desde Utilidades.

Audio Native

En la configuración del elemento Embed, cambia el tipo a HTML y pega el fragmento <div> del código de inserción de Audio Native en el cuadro HTML.

Div de inserción
    <div
        id="elevenlabs-audionative-widget"
        data-height="90"
        data-width="100%"
        data-frameborder="no"
        data-scrolling="no"
        data-publicuserid="public-user-id"
        data-playerurl="https://elevenlabs.io/player/index.html"
        data-projectid="project-id"
    >
        Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
    </div>
Audio Native
3

Publica tus cambios

Por último, publica tus cambios y ve a la versión publicada de tu página. Verás un mensaje que te indicará que se está creando el proyecto de Audio Native. Después de unos minutos, el texto de tu blog se convertirá en un artículo de audio y aparecerá el reproductor de audio integrado.

Audio Native